第JavaScript動(dòng)態(tài)操作select下拉框相信在前端設(shè)計(jì)中必然不會(huì)少的了表單，因?yàn)榻?jīng)常會(huì)使用到下拉框選項(xiàng)，又或是把數(shù)據(jù)動(dòng)態(tài)回顯到下拉框中。因?yàn)橹盃砍兜給ptgroup標(biāo)簽時(shí)遇到了問(wèn)題，沒查到太過(guò)詳細(xì)的解決方案，自己動(dòng)手操作記錄一下。

首先就是咱們的老朋友select標(biāo)簽，因?yàn)樾枰猨s、jq兩種操作，所以就定義兩個(gè)select標(biāo)簽。

HTML代碼：

div

selectid="mySelect1"/select

selectid="mySelect2"/select

buttonid="addSelect2"添加/button!--此處用于點(diǎn)擊動(dòng)態(tài)添加到mySelect2--

/div

之后就是引用jq，定義js、jq操作，代碼我都貼下面了。

JS代碼：

scriptsrc="/jquery/1.10.2/jquery.min.js"/script

scripttype="text/javascript"

//1.動(dòng)態(tài)操作-JS方式

//這里先定義一個(gè)json對(duì)象，用于獲取并新增到select標(biāo)簽

letlanguage={

"languageList":[

"groupName":"前端",

"optionName":[

{"languageName":"html"},

{"languageName":"CSS"},

{"languageName":"javascript"}

"groupName":"后端",

"optionName":[

{"languageName":"java"},

{"languageName":"JSP"}

//language.languageList-數(shù)據(jù)位置

letindex=0;

for(objoflanguage.languageList){

//js創(chuàng)建optgroup標(biāo)簽

letoptgroup=document.createElement("optgroup");

//設(shè)置optgroup標(biāo)簽的label和id值

optgroup.label=obj.groupName;

optgroup.id="optgroupId"+index;

//把創(chuàng)建optgroup新增到select下

document.getElementById("mySelect1").add(optgroup);

//針對(duì)optgroup標(biāo)簽，添加它的option標(biāo)簽

for(vari=0;iobj.optionName.length;i++){

//js創(chuàng)建option標(biāo)簽

letoption=document.createElement("option");

option.value=obj.optionName[i].languageName;

option.innerHTML=obj.optionName[i].languageName;

document.getElementById("optgroupId"+index).appendChild(option);

index+=1;//自定義下標(biāo)放在最后新增，防止添加option時(shí)id增加

//2.動(dòng)態(tài)新增-JQ方式

letitem=0;

$("#addSelect2").click(function(){

item=item+1;

//jq點(diǎn)擊按鈕后向下拉框新增optgroup標(biāo)簽

$("#mySelect2").append("optgroupid='optgroup"+item+"'label='生成的optgroup標(biāo)簽"+item+"'/optgroup

letr=Math.floor((Math.random()*5)+1);//生成隨機(jī)數(shù)1-5

//把隨機(jī)數(shù)個(gè)數(shù)個(gè)的option添加到當(dāng)前新增的optgroup下

for(vari=1;ii++){

$("#optgroup"+item).append(`optionvalue="`+i+`"隨機(jī)生成的option`+i+`/option

/script

需要注意的是：盡管用的id是遞增產(chǎn)生的，但前面的名字也不要一樣，我在測(cè)試按鈕功能的時(shí)候，沒注意就把兩種optgroup的id定義成一樣的，結(jié)果按鈕隨機(jī)生成的option都加到了相應(yīng)id的mySelect1的optgroup里面了。

最后再貼一下運(yùn)行效果

首先就是mySelect1回顯json中的