只有你爬到山顶了,这座山才会支撑着你 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

基于layui实现二级联动下拉选择(省份城市选择)

前端设计 memory 发布于March 23, 2017 标签: JavaScript

先看一下简单的效果



直接上代码
html部分 (下拉框中value的数值我是根据数据库中取出来)

<div class="layui-form-item">
    <label class="layui-form-label">城市</label>
    <div class="layui-input-inline">
        <select name="city" lay-filter="province">
            <option value=""></option>
            <option value="11">北京市</option>
            <option value="12">天津市</option>
            <option value="13">河北省</option>
            <option value="14">山西省</option>
            <option value="15">内蒙古自治区</option>
            <option value="21">辽宁省</option>
            <option value="22">吉林省</option>
            <option value="23">黑龙江省</option>
            <option value="31">上海市</option>
            <option value="32">江苏省</option>
            <option value="33">浙江省</option>
            <option value="34">安徽省</option>
            <option value="35">福建省</option>
            <option value="36">江西省</option>
            <option value="37">山东省</option>
            <option value="41">河南省</option>
            <option value="42">湖北省</option>
            <option value="43">湖南省</option>
            <option value="44">广东省</option>
            <option value="45">广西壮族自治区</option>
            <option value="46">海南省</option>
            <option value="50">重庆市</option>
            <option value="51">四川省</option>
            <option value="52">贵州省</option>
            <option value="53">云南省</option>
            <option value="54">西藏自治区</option>
            <option value="61">陕西省</option>
            <option value="62">甘肃省</option>
            <option value="63">青海省</option>
            <option value="64">宁夏回族自治区</option>
            <option value="65">新疆维吾尔自治区</option>
            <option value="71">台湾省</option>
            <option value="81">香港特别行政区</option>
            <option value="82">澳门特别行政区</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="city" id="city">
            <option value=""></option>
        </select>
    </div>
</div>

js操作部分

form.on('select(province)', function(data){
            $.getJSON("/api/getCity?pid="+data.value, function(data){
                var optionstring = "";
                $.each(data.data, function(i,item){
                    optionstring += "<option value=\"" + item.code + "\" >" + item.name + "</option>";
                });
                $("#city").html('<option value=""></option>' + optionstring);
                form.render('select'); //这个很重要
            });
});

后台返回的数据格式json

{
    "status": 200,
    "message": "result",
    "data": [
        {
            "code": "3418",
            "name": "宣城市",
            "province": "34"
        },
        {
            "code": "3417",
            "name": "池州市",
            "province": "34"
        },
        {
            "code": "3416",
            "name": "亳州市",
            "province": "34"
        },
        {
            "code": "3415",
            "name": "六安市",
            "province": "34"
        },
        {
            "code": "3413",
            "name": "宿州市",
            "province": "34"
        },
        {
            "code": "3412",
            "name": "阜阳市",
            "province": "34"
        },
        {
            "code": "3411",
            "name": "滁州市",
            "province": "34"
        },
        {
            "code": "3408",
            "name": "安庆市",
            "province": "34"
        },
        {
            "code": "3407",
            "name": "铜陵市",
            "province": "34"
        },
        {
            "code": "3406",
            "name": "淮北市",
            "province": "34"
        },
        {
            "code": "3405",
            "name": "马鞍山市",
            "province": "34"
        },
        {
            "code": "3404",
            "name": "淮南市",
            "province": "34"
        },
        {
            "code": "3403",
            "name": "蚌埠市",
            "province": "34"
        },
        {
            "code": "3402",
            "name": "芜湖市",
            "province": "34"
        },
        {
            "code": "3401",
            "name": "合肥市",
            "province": "34"
        }
    ]
}

相关推荐

添加新评论

全部评论:已有 11 条评论

  1. 李帅

    你会不会的 发这个糊弄人

    1. memory

      这个是layui1.x中的,我项目中就是这样用的。如果你没理解,可以用官方现在提供的解决方案。

  2. asd

    感谢博主,功能已实现

  3. Uncaught ReferenceError: form is not defined

    Uncaught ReferenceError: form is not defined

  4. tomxuetao

    能个实例吗?

  5. 哈哈

    请问pid怎么用

    1. memory

      pid是传入当前获取的id值.在后台查询当前这个id值下的下级分类.

      1. memory

        回头我写个php的demo.

      2. zjj

        请问有没有具体pid使用的方法呢?

  6. 鱼儿

    请问你这个pid是哪里的

  7. 个人博客

    看看先

网站状态

  • 栏目分类:49个
  • 发布文章:1554篇
  • 用户评论:841条
  • 开博至今:4399天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • J Zhiguang: valued article for a new learnner.
  • VPS234: 写得不错啊,支持一下,证书现在很多免费的吧
  • 游客: 感谢,我终于明白了markdown原来就是快捷键啊。
  • 楚狂人博客: 感谢博主分享干货
  • 天津网站建设: 写的很棒,感谢博主
  • 醉八虫医用冷敷贴: 支持下博主
  • 有意思吧: 既然来了,就踩一下,
  • 小云: 不错
  • tper: 你列子中按分类归档的图片,每个分类下面显示分类下的文章的代码是怎...
  • 小云: 写的很不错
  • 女装品牌: 文章不错支持一下
  • memory: 升级之后不能访问是密码套件的事儿。其实可以配置好一个写公共文件引...
  • 欧文斯: 很奇怪,都升级之后 443 SSL 加密不能访问,其他端口却可以
  • 子午书屋: 好久没使用memcache了
  • 小云: 写的不错,谢谢分享
  • yiye: 楼主你好,不知道我回复的邮件您看到没?我下载的JPress不是最...
  • memory: 海哥最近更新的新版的我还没有测试过。具体原因还不清楚。不过你可能...