Layui select（下拉框）使用（动态渲染，更改选中值）

Dear 丶 2023-10-05 13:49 60阅读 0赞

#### 1 动态渲染 ####

HTML 代码：

<form>
        <select id="RiverTypeLevel" >
            <option value="">--全部--</option>
        </select>
    </form>

JS代码：

var ids=['1','2','3'];
    var names=['流域','河段','水系'];
    var select= document.getElementById('RiverTypeLevel');
    for (var i=0;i<ids.length;i++) {
        var option = document.createElement("option");
        option.setAttribute("value", ids[i]);
        option.innerText = names[i];
        select.appendChild(option)
        }
    };
    //渲染下拉框
    layui.use('form', function () {
        var form = layui.form;
        form.render("select");
    });

最终效果图：

![20201117191837365.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

注：动态渲染select标签时，需要将select标签置于form表单内。

#### 2 更改选中值 ####

//更改选中值
    $("#RiverTypeLevel").val('3');
    //重新渲染下拉框
    layui.use('form', function () {
        var form = layui.form;
        form.render("select");
    });

[20201117191837365.png]: https://img-blog.csdnimg.cn/20201117191837365.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201117193431428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui radio（单选按钮）的使用（动态渲染和更改选中值）

1 动态渲染 HTML代码： <form> <input type="radio" name="bShow" value="1" title="

Bertha 。/ 2023年10月05日 13:49/ 0 赞/ 52 阅读

相关 Layui select（下拉框）使用（动态渲染，更改选中值）

1 动态渲染 HTML 代码： <form> <select id="RiverTypeLevel" > <option

Dear 丶/ 2023年10月05日 13:49/ 0 赞/ 61 阅读

相关 select 下拉框不可选中

select 下拉框不可选中 disabled属性定义和用法浏览器支持实例业务应用移除disab

你的名字/ 2022年12月25日 14:53/ 0 赞/ 370 阅读

相关 vue渲染select下拉框的值

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

雨点打透心脏的1/2处/ 2022年11月07日 05:50/ 0 赞/ 245 阅读

相关 vue渲染select下拉框的值

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

逃离我推掉我的手/ 2022年11月05日 11:48/ 0 赞/ 250 阅读

相关 vue提交select下拉框选中的值

写在前面的而一些啰嗦的话: vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k G

墨蓝/ 2022年09月05日 04:09/ 0 赞/ 264 阅读

相关 vue提交select下拉框选中的值

例子 <template> <div class="tab-container"> <div class="filter-containe

向右看齐/ 2022年08月29日 09:39/ 0 赞/ 234 阅读

相关 layui select下拉框监听值变化 layui 下拉列表的change事件

layui下拉列表的事件不能用jq的change 应该用自带的方式写。默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。

叁歲伎倆/ 2022年05月10日 02:24/ 0 赞/ 996 阅读

相关 layui select 下拉框级联动态赋值与获取选中值

//下拉框必须在 class="layui-form" 里不然监听事件没有作用 <div class="layui-form" > <div c

Myth丶恋晨/ 2022年04月15日 04:41/ 0 赞/ 1096 阅读

相关 layui通过下拉框动态渲染多级表头

layui通过下拉框动态渲染多级表头之前遇到的坑直接上图解决方法之前遇到的坑直接上图 ![在这里插入图片描述][watermark_t

我就是我/ 2021年09月30日 04:48/ 0 赞/ 547 阅读