建立个人品牌,把你的名字变成钱 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

基于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"
        }
    ]
}

相关推荐

添加新评论

全部评论:仅有一条评论

个人博客

个人博客2017-03-26 00:14:02 回复

看看先

网站状态

  • 栏目分类:35个
  • 发布文章:1109篇
  • 用户评论:620条

最新回复

  • 香港服务器: 很详细,学习了
  • memory: 对,这个密钥最好是自己换一下。当然不嫌麻烦甚至可以考虑将密钥做到...
  • 小明明: 在加密的时候 秘钥固定不就可以机密了吗
  • 上海代理记账: 看起来代码有一些复杂的呀。。。
  • 香港云服务器: 站长不错,不错的干货
  • yet handsome: 我看了你的这个发现历史真的是惊人的相似,我们已经做到redis集...
  • memory: 好久不玩它们了,我的相关知识来自谷歌...
  • 于小鱼: 你好,想请教一些关于xen和kvm的问题。
  • memory: 如果将图片 base64_encode 后,再想取回以前的路径不...
  • 陈凌风: 我要区正常的路径显示怎么办?
  • genuiner: 牛逼
  • haitongz: 赞
  • memory: php64位? 这个我还真没有注意。。。回头再试试
  • Kngstr: 这个很简单,你用的PHP不是64位的,64位的dll只能在64位...
  • memory: 使用的是typecho.
  • GavinHsueh: 您好,我了解下您的博客是自己开发的么?看着很不错
  • 个人博客: 看看先
  • memory: 谢谢,已修正。
  • jrotty: 方法一中next后面少个'符号
  • daxia: mark