使用ajax填充下拉框--分组select

最新推荐文章于 2021-08-06 14:00:21 发布

H_MZ

最新推荐文章于 2021-08-06 14:00:21 发布

阅读量145

点赞数

文章标签： python json

原文链接：https://my.oschina.net/AnymoreCoder/blog/740686

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果如下图所示:

输入图片说明

html:

<div class="form-group">
      <label class="control-label col-xs-12 col-sm-4 no-padding-right" for="countryId">国家</label>
       <div class="col-xs-12 col-sm-4"><div class="clearfix"><select id="countryId" name="countryId" type="text"  class="form-control field"></select></div></div>
 </div>

js:

var callBackCountry ;
callBackCountry = function (data) {       
            var option, optionGroup, firstOption, select, countryArray;
            select = document.querySelector("#countryId");
            select.innerHTML = "";
            firstOption = document.createElement("option");
            firstOption.value = "";
            firstOption.innerHTML = "-------请选择国家-------";
            select.appendChild(firstOption);
            for (var countryName in data) {
                optionGroup = document.createElement("OptGroup");
                optionGroup.label = countryName;
                countryArray = data[countryName];
                for (var i = 0; i < countryArray.length; i++) {
                    option = document.createElement("option");
                    option.value = countryArray[i].id;
                    option.innerText = countryArray[i].name;
                    optionGroup.appendChild(option);
                }
                select.appendChild(optionGroup);
            } 
        };
$.get("YOUR-URL", new Params(), callBackCountry, "json");

最后，附上传数据格式，来自chrome的network:

输入图片说明