首页 > 其他 > 详细

django项目中cxselect三级联动

时间:2019-08-17 13:15:10      阅读:90      评论:0      收藏:0      [点我收藏+]

 下载cxselect插件放在static文件夹下

前端引入

<script src="/static/js/jQuery-1.8.2.min.js"></script>
<script src="/static/cxSelect/jquery.cxselect.min.js"></script>

前端html样式

{#    给三级联动设置简样式#}
    <style>
        .wrap{width:600px;margin:0 auto;padding: 0 40px 20px;border:2px solid #999;}
        fieldset{margin: 10px 0;}
        a{color:#06f;text-decoration:none;}
    </style>

前端页面

<div class="wrap">
<!--2:写html-->
   <fieldset id="city_china">
      <legend>默认</legend>
      <p>省份:<select class="province" name="province" data-value="" data-first-title="选择省份" disabled="disabled"></select></p>
      <p>城市:<select class="city" name="city" data-value="" data-first-title="选择市" disabled="disabled"></select></p>
      <p>地区:<select class="area" name="area" data-value="" data-first-title="选择地区" disabled="disabled"></select></p>
   </fieldset>

   <fieldset id="city_china_val">
      <legend>设置默认值及选项标题</legend>
      <p>所在地区:
         <select class="province" name="province" data-value="河南省" data-first-title="选择省" disabled="disabled"></select>
         <select class="city" name="city" data-value="郑州市" data-first-title="选择市" disabled="disabled"></select>
         <select class="area" name="area" data-value="中原区" data-first-title="选择地区" disabled="disabled"></select>
      </p>
   </fieldset>

   <fieldset id="global_location">
      <legend>全球主要国家城市联动</legend>
      <p>所在地区:
         <select class="country" data-first-title="选择国家" disabled="disabled"></select>
         <select class="state" data-value="" disabled="disabled"></select>
         <select class="city" data-value="" disabled="disabled"></select>
         <select class="region" data-value="" disabled="disabled"></select>
      </p>
   </fieldset>


</div>

js

{#三级联动#}
<script>

    });
   //3:写js
    $(#city_china).cxSelect({
        url : /static/cxSelect/cityData.min.json,  //联动json数据
        selects: [province, city, area]           //select框对应class
        // nodata: none                               //无子类别时不显示下拉框
    });

    $(#city_china_val).cxSelect({
        url : /static/cxSelect/cityData.min.json,  //联动json数据
        selects: [province, city, area]          //select框对应class
        // nodata: none                               //无子类别时不显示下拉框
    });

    $(#global_location).cxSelect({
        url: /static/cxSelect/globalData.min.json, //联动json数据
        selects: [country, state, city, region],//select框对应class
        nodata: none                                  //无子类别时不显示下拉框
    });


</script>

页面效果

技术分享图片

技术分享图片

 

django项目中cxselect三级联动

原文:https://www.cnblogs.com/nmsghgnv/p/11367713.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!