layui select的使用及解决根据text找value遇到的bug

html

<div class="layui-inline">
    <label class="layui-form-label required">城市</label>
    <div class="layui-input-inline">
        <select id="city" >
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
            <option value="5">成都</option>
        </select>
    </div>

    <button class="layui-btn" id="get_value">获取</button>
    <button class="layui-btn" id="set_value">根据value设置</button>
    <button class="layui-btn" id="set_text">根据text设置</button>
</div>

js代码

layui.use('layer', function(){
        var $ = layui.$,
            layer = layui.layer;

        $(".layui-btn").click(function() {
            var id = $(this).attr('id');
            if (id == "get_value") {
                s1 = $("#city option:selected").text();//获取选中option文本
                layer.msg(s1);
            }
            if (id === "set_value") {
                // $("#city").find("option[value='2']").attr("selected", true); //该方法在非IE浏览器下只能第一次有效(IE下面完全正常),原因为
                $("#city").val('2'); //根据value值选中option,这个是首选,简单高效
            }
            if (id === "set_text") {
                // $("#city option:contains(杭州)").attr("selected",true);  //貌似只能用一次(但在IE下面完全正常)
                var val = "";
                $("#city option").each(function () {
                     if ($(this).text() == "深圳") {
                        val = $(this).val();
                         $("#city").val(val); //根据value值选中option,简单高效
                     }
                 });
            }
        });
    });

本身:js 不管是通过value定位还是通过text定位,都是只需要一行js代码即可。

//通过value定位(两种方法)
$("#city").val('2'); //根据value值选中option,这个是首选,简单高效
$("#city").find("option[value='2']").attr("selected", true); //该方法在非IE浏览器下只能第一次有效(IE下面完全正常),下面会说原因

//通过text定位(常规方法)
$("#city option:contains(杭州)").attr("selected",true);  //确定在非IE浏览器下只能用一次,也就是第一次有效。

上面两种只能用一次的方法,为什么在IE下正常工作,在非IE下不正常呢?经测试如下:

在Chrome下,解析后的页面如下图(还没进行点击操作)

分别交替点击后,可以看到两个要操作的value的selected 属性均早为selected了

IE下,交替点击渲染如下,基本一样,但是正常响应:

经观察如果是在IE下该select框未被layui 渲染,黑边框的为IE下的。所以,也不知道是浏览器问题,还是layui问题,有知道的可以告诉我一下

经重新测试,已确定,并非layui的问题,测试文章连接:https://blog.csdn.net/wh445306/article/details/109665114

 

posted @ 2022-10-04 00:14  IT情深  阅读(345)  评论(0)    收藏  举报