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

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

concealed0

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

阅读量2k

点赞数 3

分类专栏：前端小技巧文章标签：前端 select 动态 option

本文链接：https://blog.youkuaiyun.com/concealed0/article/details/94346742

版权

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

4 篇文章

订阅专栏

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("超级权限菜单！菜单组选择");
    }
});