Layui实现动态生成select中的option项,同时设置select下拉框选中项

最新推荐文章于 2024-11-01 13:37:40 发布

bg6

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量4.2k

点赞数 1

文章标签： javascript layui html

本文链接：https://blog.csdn.net/weixin_44320224/article/details/113255637

版权

本文介绍了如何使用Layui在JavaScript中动态生成select的option选项，并在编辑场景下根据后台数据设置select下拉框的选中项。通过示例代码展示了一种适用于民族select的方法，以及一种适用于选项数量固定且较少的情况。

摘要由CSDN通过智能技术生成

项目场景：

主要用于为民族select下拉框动态生成option值，同时在实现编辑功能时，表单中的select下拉框的选中项为后台传过来的数据。

举例：

如下图所示的表单内容，下图的民族和政治面貌select下拉框分别采用了不同的方法来实现设置选中项。
在这里插入图片描述

代码：

民族的select下拉框的实现代码（动态添加option项同时设置下拉框的选中项）
jsp

  <div class="layui-inline">
        <label class="layui-form-label">民族</label>
        <div class="layui-input-inline">
            <select id="edit_nation" class="layui-input"
                    placeholder="请输入民族" name="nation">

            </select>
        </div>
    </div>

还有下面这个只能写在jsp页面

<script>
    var stu = "<%=request.getAttribute("sn") %>"
</script>

    //获取民族列表外加设置select初始值
    $.ajax({
   
        url:'/getNation.action',
        dtatType:'json',
        async:true,
        success:function (data) {
   
            //第一个添加的为选中值
            //console.log(stu)
            $('#edit_nation').append(new Option(stu,stu));
            $.