当前位置:编程学习 > JS >>

jquery 实现 html给select下拉框动态赋值

1.使用JS实现 动态赋值、默认选中、删除
//html 代码
<select id="zzzyk.com">
 <option></option>
</select>

//js 代码
// 定义一个变量 arr
let arr = ['易做图','站长资源库','周公解梦','动态表情','头像制作','头像设计']

//js 动态赋值
let com = document.getElementById("zzzyk.com");
for( let i = 0;i<arr.length;i++){
 com.options.add(new Option(arr[i],i));
}

//js 默认选中
let options = document.getElementById("zzzyk.com").options;
for(let i = 0;i<options.length;i++){
 if(options[i].value==2){//根据id选中2
 options[i].selected = true;
 }
}

//js 删除option(删除第1个options)
com.options.remove(1);

2. 使用jQuery实现 动态赋值、默认选中、删除
//html 代码
<select id="yizuotu.net">
 <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>';
}
$("#yizuotu.net").html(oHtml);

//jQuery 动态赋值第二种
for(let i=0;i<arr.length;i++){
 if(arr[i]=="腾讯"){//默认选中腾讯
 $("#yizuotu.net").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>");
 }else{
 $("#yizuotu.net").append("<option value='"+i+"'>"+arr[i]+"</option>");
 }
}

//根据value默认选中
$("#yizuotu.net").find("option[value='5']").attr("selected",true);//选中5

//根据value移除选中
$("#yizuotu.net").find("option[value='1']").attr("selected",false);//移除1

//根据value实现删除
$("#yizuotu.net").find("option[value='5']").remove();
$("#yizuotu.net option[value='0']").remove();
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,