下拉列表select动态添加option和获取选中的option的值和value

本文介绍: /动态的往select 里面添加 option(JS方式添加)两种方法获取选中的option的值和value。//拿到选中的option的value。//拿到选中的option的value。3、获取选中 opt ion的value。2、获取选中 opt ion的value。//Jquery 动态添加 opt ion。//拿到选中的opt ion的text。//拿到选中的opt ion的text。2、获取选中的opt ion的索引值。4、获取选中opt i on的text。3、获取选中opt i on的text。

分别用两种方法动态添加 opt i on：

方法一：JS方法添加

1、创建 select 标签

var select = docu m net.createElem ent(‘select’);

2、给s el e c t 添加 id

s el e c t.setAttr i bute(‘id’,‘s electi d’);

<!DOCTYPE html&gt;
<html&gt;
	<head&gt;
		<meta charset="utf-8" /&gt;
		<title&gt;</title>
		<script src="./js/jquery.min.js"></script>
		<script>
			window.onload = function(){
				//动态的往select里面添加option(JS方式添加)
				var select = document.createElement("select");
				select.setAttribute('id','sc');
				select.setAttribute('onchange','change()');
				document.body.appendChild(select);
				for(var n = 1;n<10;n++){
					select.options.add(new Option('添加option'+n,n+""));
				}
				
				//Jquery动态添加option
				for(var m = 1;m<10;m++){
					$('#selectid').append("<option value="+m+">option"+m+"</option>");
				}
				change();
			}
			
			function change(){
				//js方式获取当前选中项
				//拿到select的对象
				var sel1 = document.getElementById('selectid');
				//获取当前选中项的索引
				var index = sel1.selectedIndex;
				//拿到选中的option的value
				console.log(sel1.options[index].value);
				//拿到选中的option的text
				console.log(sel1.options[index].text);
				
				//Jquery方式获取当前选中项
				var sel2 = $('#selectid option:selected');
				//拿到选中的option的value
				console.log(sel2.val());
				//拿到选中的option的text
				console.log(sel2.text());
			}
		</script>
	</head>
	<body>
		<select id='selectid' οnchange="change()"  ></select>
	</body>
</html>