ajax返回结果如何绑定到select选择框

 

描述:ajax返回结果如何绑定到select选择框

在做一个管理系统时,有这样一个需求:N个设备,分别属于两个设备厂,点击Redio时,选择框动态加载出该设备厂下的设备供选择。这时,我们需要在后端取出数据动态放入select标签中,以供选择,采用Ajax的方式。

实现

HTML页面的选择框代码:

<select name="name" id="projectId" class="frame name">
       <option value="">选择设备/option>
</select>

Ajax动态加载代码:

$.ajax({
        type: "GET",
        url: Feng.ctxPath + "/investInfo/getProjectByAt",
        data: data,
        success:function(data){
            $("#projectId").empty();
            $.each(data, function(index, item) {
                $("#projectId").append(  //此处向select中循环绑定数据
                    "<option value="+item.projectId+">" + item.projectName+ "</option>");
            });

        }
    })

我们使用append不断循环绑定,每次都会加载到上次数据之后,所以使用了$("#projectId").empty(); 方法,每次请求时将上次的数据清除!

另附jquery和javaScript 清空 select下拉框里的所有选项的方法

<select id="area">
    <option>11</option>
     <option>22</option>
      <option>33</option>
</select>

Js

<script>
var area= document.getElementById("area");
area.innerHTML = "";
 
for(var i=0;i<area.childNodes.length;i++){
area.removeChild(area.options[0]);
area.remove(0);
area.options[0] = null;
}
</script>

 

Jquery

$("#area").html("");
$("#area").find("option").remove();
或者
$("#area").empty();

 

参考文档:https://blog.csdn.net/haibo0668/article/details/78384405

 

发表评论