select下拉框动态赋值、默认选中、删除
select下拉框赋值1.使用JS实现新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.使用JS实现你好! 这
·
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>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)