layui框架的select获取选中的值、选中的文本、选中的索引,禁用、启用、动态选中

101 阅读1分钟

HTML

<div class="layui-form-item ">
    <label class="layui-form-label">测试Demo</label>
    <div class="layui-input-block ">
        <select id="demo" lay-verify="" lay-filter="selctOnchange"
                name="demo">
            <option data-idx="" value="">请选择</option>
            <option data-idx="5" value="5">测试5</option>
            <option data-idx="2" value="2">测试2</option>
            <option data-idx="3" value="3">测试3</option>
            <option data-idx="4" value="4">测试4</option>
            <option data-idx="7" value="7">测试7</option>
        </select>
    </div>
</div>

JS

//监听select
form.on('select(selctOnchange)', function (data) {
    var e = data.elem;
    //获取选中的值
    console.log(data.value)
    //获取选中的文本
    var text =e[e.selectedIndex].text;
    console.log(text)
    //获取选中的索引
    var index = e.selectedIndex;
    console.log(index)
   //获取自定义属性
   var data-idx = e[e.selectedIndex].dataset.idx;
   console.log(data-idx)
})

禁用select

//禁用select
$("#demo").attr("disabled","disabled");
form.render('select');

启用select

$("#demo").removeAttr("disabled");
form.render('select');

动态选中 

// 当前的select的id,选中测试2
$('#demo').val(2);
form.render('select');