select下拉框动态赋值、默认选中、删除
记录分享一下个人常用的对select下拉框的动态操作，有错误的还请指正，方法肯定不止这几种，欢迎各位补充。
1.使用JS实现
动态赋值、默认选中、删除
//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>
1292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
