经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
django项目中cxselect三级联动
来源:cnblogs  作者:记住我忘记我  时间:2019/8/19 8:38:05  对本文有异议

 下载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>

页面效果

 

原文链接:http://www.cnblogs.com/nmsghgnv/p/11367713.html

 友情链接: NPS