django project cxselect three linkage

Under Download cxselect plug-in static folder

The introduction of front-end

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

Html front-end style

{ #     To three linkage style profile disposed} # 
    <style> 
        .Wrap {width: 600px; margin: Auto 0; padding: 0 40px 20px; border: Solid 2px # 999;} 
        the fieldset {margin: 10px 0;} 
        A { Color: # 06F; text-Decoration: none;} 
    </ style>

Front page

<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>Set the default value and the option heading </ Legend> <the SELECTRegion:
         
      <the p->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 = " Central Area " Data-First-title = " select area " Disabled = " Disabled " > </ SELECT> 
      </ P> 
   </ the fieldset> 

   <the fieldset ID = " global_location " > 
      <Legend> the world's major national urban linkage </ Legend> 
      <the p-> Region:
          <the SELECT class = " country " the Data-First-title = "Select Country " 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>

{ # Three linkage} # 
<Script> 

    });
    //. 3 : Write JS 
    $ ( ' #city_china ' ) .cxSelect ({ 
        URL: ' /static/cxSelect/cityData.min.json ' , // linkage data json 
        Selects: [ ' Province ' , ' City ' , ' Area ' ] // SELECT block corresponding to the class
         // NoData: ' none '                                // no subcategories is not a drop-down box 
    }); 

    $ ( ' #city_china_val' ) .CxSelect ({ 
        URL: ' /static/cxSelect/cityData.min.json ' , // linkage json data 
        Selects: [ ' Province ' , ' City ' , ' Area ' ] // SELECT block corresponding to the class
         // NoData : ' none '                                // no subcategories is not a drop-down box 
    }); 

    $ ( ' #global_location ' ) .cxSelect ({ 
        URL: ' /static/cxSelect/globalData.min.json ' ,// linkage data json
        selects: [ ' Country ' , ' State ' , ' City ' , ' Region ' ], // SELECT block corresponding to the class 
        NoData: ' none '                                   // no subcategories is not a drop-down box 
    });


 </ Script>

Results page

django project cxselect three linkage

Guess you like