layui select下拉菜单联动

做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示

<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

时间: 2024-10-03 09:16:24

layui select下拉菜单联动的相关文章

火狐浏览器下连接a下无法使用select下拉菜单

火狐浏览器下连接a下无法使用select下拉菜单:如果select下拉菜单包裹在链接a中,则无法实现选中效果,当然如此使用在实际应用中也是很少见的,不过下面还是做一下简单介绍,如何避免此种问题的出现,寄希望能够给需要者带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

使用select下拉菜单筛选table表格内容

使用select下拉菜单筛选table表格内容:本章节介绍一下如何利用select下拉菜单对表单的内容进行筛选,如果数据量庞大,便于搜索使用的话,筛选效果还是非常有必要的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

如何设置select下拉菜单option项显示的数目

如何设置select下拉菜单option项显示的数目: 本章节介绍一下如何设置select下拉菜单的可见的option项的数目,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁

jquery如何删除select下拉菜单中所有的option项

jquery如何删除select下拉菜单中所有的option项:在实际应用中,有可能要求一次性删除所有的select下拉菜单的option选项,方法非常的简单.select下拉菜单: <select id="mayi"> <option value="1">蚂蚁部落一</option> <option value="2">蚂蚁部落二</option> </select> 删除

div模拟select下拉菜单效果

有些时候select下拉菜单直接用css调整样式,可能会有兼容性的问题,尤其是右侧的下拉三角,很难用css控制,那怎么办呢?可以采用div模拟select下拉菜单的效果.先直接上代码了: HTML的结构如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="t

美化select下拉菜单

默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等,这样就可以用CSS尽情定制了. Chosen Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. WooCommerce中的国家选择器很美观,这个脚本实现的效果与之完全相

javascript模拟select下拉菜单

javascript模拟select下拉菜单: 由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动 案例描述:中继器下拉菜单联动 知识点: 中继器复合操作 效果图: 在线效果预览: AxShare在线效果预览: 原型下载地址:中继器拉菜单联动 .rp 在线视频: 实现步骤: 更新中-..

web前端html实例-select下拉菜单美化代码

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.