select下拉框动态赋值、默认选中、删除
动态赋值、默认选中、删除
动态赋值、默认选中、删除
记录分享一下个人常用的对select下拉框的动态操作,有错误的还请指正,方法肯定不止这几种,欢迎各位补充。
动态赋值、默认选中、删除
//html 代码 <select id="select_one"> <option></option> </select> //js 代码 // 定义一个变量 arr let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多'] //js 动态赋值 let com = document.getElementById("select_one"); for( let i = 0;i<arr.length;i++){ com.options.add(new Option(arr[i],i)); } //js 默认选中 let options = document.getElementById("select_one").options; for(let i = 0;i<options.length;i++){ if(options[i].value==2){//根据id选中阿里 options[i].selected = true; } } //js 删除option(删除第1个options) com.options.remove(1);
2. 使用jQuery实现
动态赋值、默认选中、删除
//html 代码 <select id="select_two"> <option></option> </select> //js 代码 // 定义一个变量 arr let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多'] //jQuery 动态赋值第一种 let oHtml = ''; for(let i=0;i<arr.length;i++){ oHtml+='<option value="'+i+'">'+arr[i]+'</option>'; } $("#select_two").html(oHtml); //jQuery 动态赋值第二种 for(let i=0;i<arr.length;i++){ if(arr[i]=="腾讯"){//默认选中腾讯 $("#select_two").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>"); }else{ $("#select_two").append("<option value='"+i+"'>"+arr[i]+"</option>"); } } //根据value默认选中 $("#select_two").find("option[value='5']").attr("selected",true);//选中拼多多 //根据value移除选中 $("#select_two").find("option[value='1']").attr("selected",false);//移除选中腾讯 //根据value实现删除 $("#select_two").find("option[value='5']").remove(); $("#select_two option[value='0']").remove();
对多选下拉框进行批量操作
//html 代码 <select id="select_four " multiple="multiple" style="height: 200px;width: 100px;"> <option value="0" selected="selected">百度</option> <option value="1" selected="selected">腾讯</option> <option value="2" selected="selected">阿里巴巴</option> <option value="3" >字节跳动</option> <option value="4" >京东</option> <option value="5" selected="selected">拼多多</option> </select> //批量选中 、批量移除选中 setTimeout(function(){ //移除选中所有id为基数的 $("#select_four option").each(function(){ if($(this).val()%2==0){ $("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",false); } }); //选中所有id为偶数的 $("#select_four option").each(function(){ if($(this).val()%2!=0){ $("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",true); } }); },2000);
3.源码
不管是用JS还是用jQuery实现select下拉框的动态操作,无非都是先取到对应的dom节点,然后实现增删option;选中与非选中都是遍历所有option,通过value或者文本判断是否符合选中或非选中的条件(以下代码都是通过value进行判断的),设置selected所对应的属性来实现。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>select动态赋值、默认选中、删除</title> <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> </head> <body> <h3>单选框</h3> <select id="select_one"> <option></option> </select> <select id="select_two"> <option></option> </select> <select id="select_three"> <option></option> </select> <br> <h3>多选框</h3> <select id="select_four" multiple="multiple" size=3 style="height: 200px;width:100px"></select> <select id="select_five" multiple="multiple" style="height: 200px;width: 100px;"> <option value="0" selected="selected">百度</option> <option value="1" selected="selected">腾讯</option> <option value="2" selected="selected">阿里巴巴</option> <option value="3" >字节跳动</option> <option value="4" >京东</option> <option value="5" selected="selected">拼多多</option> </select> </body> <script type="application/javascript"> //全局变量 arr let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多'] /** js实现*/ //js 动态赋值 let com = document.getElementById("select_one"); for( let i = 0;i<arr.length;i++){ com.options.add(new Option(arr[i],i)); } //js 默认选中 let options = document.getElementById("select_one").options; for(let i = 0;i<options.length;i++){ if(options[i].value==2){//根据id选中阿里 options[i].selected = true; } } //js 删除option(删除第1个options) com.options.remove(1); /**jq实现**/ //jq 通过拼接html实现 动态赋值 let oHtml = ''; for(let i=0;i<arr.length;i++){ oHtml+='<option value="'+i+'">'+arr[i]+'</option>'; } $("#select_two").html(oHtml); for(let i=0;i<arr.length;i++){ if(arr[i]=="腾讯"){ $("#select_three").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>"); }else{ $("#select_three").append("<option value='"+i+"'>"+arr[i]+"</option>"); } } //jq实现动态选中 、移除选中 setTimeout(function(){//为了看清楚效果,两秒后执行 $("#select_two").find("option[value='5']").attr("selected",true);//选中拼多多 $("#select_three").find("option[value='1']").attr("selected",false);//移除选中腾讯 },2000); //多选下拉框赋值 并且选中id为基数的 for(let i=0;i<arr.length;i++){ if(i%2==0){ $("#select_four").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>"); }else{ $("#select_four").append("<option value='"+i+"'>"+arr[i]+"</option>"); } } //批量选中 、批量移除选中 setTimeout(function(){ //移除选中所有id为基数的 $("#select_four option").each(function(){ if($(this).val()%2==0){ $("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",false); } }); //选中所有id为偶数的 $("#select_four option").each(function(){ if($(this).val()%2!=0){ $("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",true); } }); },2000); //删除指定的option setTimeout(function(){ $("#select_five").find("option[value='5']").remove(); $("#select_five option[value='0']").remove(); },2000); </script> </html>
————————————————
版权声明:本文为CSDN博主「silence-lizz」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Silenct_UZI/article/details/106217086