以php语言为例
 
 
html
 
<div class="layui-form-item layui-row layui-col-space15">
   <label class="layui-col-xs3 relative">
        <span class="color-green">报考学校</span>
        <select class="layui-select" required name="school_id" lay-search lay-filter="school_id">
        	{php}
				$schools = Db::name('School')
					->where(['pid' => '0'])
					->field('id,title')
					->order('sort desc,id desc')
					->select();
			{/php}
            {foreach $schools as $k=>$v}
            <!--{eq name='v.id' value='$vo.school_id|default=0'}-->
            <option selected value="{$v.id}">{$v.title}</option>
            <!--{else}-->
            <option value="{$v.id}">{$v.title}</option>
            <!--{/eq}-->
            {/foreach}
        </select>
    </label>
    <label class="layui-col-xs3 relative">
        <span class="color-green">层次</span>
        <select name="level_id" lay-filter="level_id" id="two_cate" required>
        </select>
    </label>
</div>
 
jq代码
 
<script>
    window.form.render();
    
    //初始化渲染
    $(function(){
        $value = $('select[name="school_id"]').val();
        school_select($value);
    })

    //学校层次二级联动
    form.on('select(school_id)', function(data){
        //data.value 得到被选中的值
        school_select(data.value);
    });
    
    function school_select(value){
        var url = '{:url("student/wxapp_product/getLevels")}?id=' + value;
        $.get(url,function(data){
            $("#two_cate").empty();
            $("#two_cate").append(new Option("请选择层次", ""));
            $.each(data.data,function(index,item){
                if(item.id == '{$vo.level_id|default=0}'){
                    $("#two_cate").append(new Option(item.title, item.id, true, true));
                }else{
                    $("#two_cate").append(new Option(item.title,item.id));
                }
            });
            layui.form.render("select");
        });
    }
    
</script>
 
php代码
 
/**
  * 按学校id获取层级
  * @param boolean $result
  */
 public function getLevels()
 {
     $levels = Db::name('School')
     ->where(['pid' => request()->get('id')])
     ->field('id,title,major')
     ->order('sort desc,id desc')
     ->select();
     $this->success('获取成功', $levels);
 }
 
效果
 
 
另外
 
//指定选中某个值
$('select[name="jobs"] option[value="0"]').attr("selected", true);
//获取选中选项中的某个值
$("select[name='ware_house_id']").find("option:selected").data('income_tuan_price');
$("select[name='ware_house_id'] option:selected").data('income_tuan_price');
 
如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流

使用layui的Select的下拉的时候，带有特殊字符，选中的内容变成转义HTML，
 例如下图，选中R&D时，text内容自动变成R&D
 
 
 解决方法
 找到From.js，查找 t(p[0].options[a]).html()
 
 改为 t(p[0].options[a]).text()
 
 问题得以解决。

 
 
做的比较简单，先从后台直接把第一级菜单输出，然后点击二级菜单的时候再动态展示
 
 
 
  
<div class="layui-inline">
                    <label class="layui-form-label">商品类别</label>
                    <div class="layui-input-inline">
                        <select name="interest"  lay-filter="one_cate">
                            <option value="">请选择</option>
                            {volist name="list" id="vo"}
                            <option value="{$vo.cate_id}">{$vo.cate_name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="interest" lay-filter="aihao" id="two_cate">
                          </select>
                    </div>
                </div>
 
 
 
 
 
  
form.on('select(one_cate)', function(data){
             //data.value 得到被选中的值
             var url = '/admin/category/selec/' + data.value;
             $.get(url,function(data){
                $("#two_cate").empty();
                $("#two_cate").append(new Option("请选择分类",""));
                $.each(data,function(index,item){
                    $("#two_cate").append(new Option(item,index));
                    console.log(index,item);
                }); 
                layui.form.render("select");
             });

        }); 
 
 
 
 
　　重点就两个
 
 
1.$("#two_cate").append(new Option(item,index));将遍历的数据插入到select中，比原来的拼接字符串省事。
 
 
2.layui.form.render("select");重载select模块，否则不会展示
 
 
　
 
 
转载于:https://www.cnblogs.com/dayin1/p/11558824.html

layui自动生成的格式,不能用之前的JQ方式来实现select下拉菜单自动选择功能
 
layui select的格式:
 
 
下面这个框里面的dl-dd是layui自动生成的,也就是关键所有,看下具体的结构图:
 
 
 
 
//选择需要选中的对象
var select = 'dd[lay-value=' + data.id + ']';

//需要用点击事件来实现选中  test为select的id
$('#test').siblings("div.layui-form-select").find('dl').find(select).click();
 
mark it.