使用layui 表单select异步查询动态添加option元素无效或者事件第二次点击才生效

最新推荐文章于 2022-12-22 11:44:33 发布

zhang-php

最新推荐文章于 2022-12-22 11:44:33 发布

阅读量2.3k

点赞数 2

分类专栏： JS ThinkPHP html5 PHP ThinkPHP5 JSON 文章标签： layui form

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37682202/article/details/89518443

版权

PHP 同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

ThinkPHP

57 篇文章 1 订阅

订阅专栏

html5

50 篇文章 0 订阅

订阅专栏

使用layui动态修改select中的option选项，一开始遇到select总是第二次变化才生效，几经周折，终于修改了一份较为适用的写法：

html页面：

<!--父级包裹器，定义id 等会儿用它来追加元素-->
<div class="layui-form-item" id="menu_parentid">
    <label class="layui-form-label"><span class="x-red">*</span>父级菜单<br/><span class="x-red">{if condition='($pid eq 0)'}一级菜单{else/}{$pname}{/if}</span></label>          
    <div class="layui-input-inline">                
        <select name="menu_parentid">               
             <option value="0">一级菜单</option>                       
        </select>
    </div>
    <div class="layui-input-inline">
        <!-- lay-filter="" 定义监听的元素 -->
        <select name="menu_parentid" lay-filter="menu_parentid2"> 
             {volist name='info' id="v1"}                    
             <option value="{$v1.menu_id}">{$v1.menu_name}</option>                
             {/volist}                   
        </select>
   </div>
   <div class="layui-input-inline" id='menu_parentid3'> <!--此选项即为要变化的选项-->
       <select name="menu_parentid">
            <option value=""></option>               
       </select>
   </div>              
</div>

javascript如下：

layui.use(['layer','form'], function(){
    var layer = layui.layer,form = layui.form;    
    //监听select menu_parentid2 即为lay-filter 中的元素
    form.on('select(menu_parentid2)', function(data){ 
       $.post("{:url('Menu/editMenu')}",{menu_parentid:data.value,isAjax:'1',html:'yes'},function(res){
            if(res.status == 1){              
                var str = "<div class='layui-input-inline' id='menu_parentid3'><select name='menu_parentid'>";                     
                $.each(res.info,function(k,v){
                    str = str + "<option value='"+v['menu_id']+"'>"+v['menu_name']+"</option>";
                });
                str = str + "</select></div>";
                $('#menu_parentid3').remove(); //移除先前定义的元素                                 
                $('#menu_parentid').append(str); //追加
                form.render('select'); //重新渲染 这个一定要放在最后这个位置               
            }else{                    
                return false;  
            }
        },'json');  
    });
});