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

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

{#    給三級聯動設置簡樣式#}

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

{#三級聯動#}

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