使用ajax填充下拉框--普通select

1.与普通select有区别的是另一种带分组的select

2.带分组的select见另一篇:使用ajax填充下拉框--分组select

3.两者均使用ajax填充,数据来源于后台大哥

效果如下图:

效果图

html:

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

js:

callBack = function (data) {   
            var option, firstOption, select;
            select = document.querySelector("#operatorId");
            select.innerHTML = "";
            firstOption = document.createElement("option");
            firstOption.value = "";
            firstOption.innerHTML = "-------请选择运营商-------";
            select.appendChild(firstOption);
            console.log(data.simOperators.length);
                for (var i = 0; i < data.simOperators.length; i++) {
                    option = document.createElement("option");
                    option.value = data.simOperators[i].id;
                    option.innerText = data.simOperators[i].name;
                    select.appendChild(option);
                }    
        };
$.get("YOUR-URL", new Params(), callBack, "json");

ps:附上传过来的数据格式,截图来自chrome的network:

输入图片说明

2017.05.02更

最近又有用到用ajax填充select,摸索出了一种更好的写法:

		var roleNameModal;
		roleNameModal =document.getElementById("roleModal");
		for (var i = 0; i < data.role.length; i++) {
			var option = document.createElement('option');
			roleNameModal.options.add(option);
			option.text = data.role[i].roleName;
			option.value = data.role[i].id;  
			$("#roleModal  option[value='"+firstValue+"'] ").attr("selected",true);
        }

$("#roleModal option[value='"+firstValue+"'] ").attr("selected",true); 这一句,等于是一个select的反显,firstValue是后台传过来的.

转载于:https://my.oschina.net/AnymoreCoder/blog/740681

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值