select下拉框动态添加option选项

最新推荐文章于 2024-05-14 17:00:11 发布

茶梨吐司

最新推荐文章于 2024-05-14 17:00:11 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq_41615323/article/details/114142705

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>select动态添加option</title>
	</head>
	
	<body>
		<select id="test"></select>
	</body>
	
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script>
	    //选项数据
		var optionArr = [{
				"name": '选项一',
				"value":'a1',
			},{
				"name": '选项二',
				"value":'a2',		
			},{
				"name": '选项三',
				"value":'a3',
			},{
				"name": '选项四',
				"value":'a4',
			}]
		
        //【1】动态添加选择项
		// var testSelect = document.getElementById("test");	
		for(var i = 0; i<optionArr.length;i++){		
			//js动态添加选项	
			// testSelect.options.add(new Option(optionArr[i].name,optionArr[i].value));
			//jq动态添加选项	
			$("#test").append(`<option value=${optionArr[i].value}>${optionArr[i].name}</option>`); 
		}
		
		//【2】设置默认选项
	   //设置value='a2'的ooption为默认选项
	$("#test").find("option[value='a2']").attr("selected",true);
     
      //【3】添加选择事件
	$('#test').on("change", function(){
	  //【4】获取被选状态值
		//获取被选的value值
		var checkVal = $(this).find(':selected').val()
		//获取被选的选项名
		var checkName=$(this).find("option:selected").text(); 
		//获取被选的索引值
		var checkIndex=$(this).get(0).selectedIndex;  
		console.log('value',checkVal,'checkName',checkName,'chekIndex',checkIndex);			
		})
		//【5】删除选项
		//删除value='a4'的option
		 $("#test option[value='a4']").remove(); 
		
	</script>
</html>

茶梨吐司

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
select下拉框动态添加option选项

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>select动态添加option</title> </head> <body> <select id="test"></select> </body> <script src="https://cdn.bootcss.c
复制链接

扫一扫