前端小技巧：js select 标签动态生成option

最新推荐文章于 2022-11-17 14:23:33 发布

原创最新推荐文章于 2022-11-17 14:23:33 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #select #动态 #option

前端小技巧专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery动态生成HTML中的Select下拉菜单选项，通过AJAX获取数据，并将其添加到Select标签中，实现动态填充菜单项的功能。

select标签动态生成option

使用下面的select标签为例

<select  id="select" name="pid">
      <option value="0" id="opt0">顶级菜单</option>
</select>

使用id属性名称对select标签进行动态创建option

$("#select").append("<option id='' value=''>"+res[i-1].cname+"</option>");

动态option数据来源

$.ajax({
    type : "post",
    async : false,//不加直接error
    url : '*****',
    success : function(res) {
    for (var i = 1; i < res.length+1; i++) {
        var a="opt"+i;
        $("#select").append("<option id='"+a+"' value='"+res[i-1].id+"'>"+res[i-1].cname+"</option>");
    }
},
    error: function () {
         console.log("超级权限菜单！菜单组选择");
    }
});