chose.jquery 联动 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>

  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
 
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
      <div class="side-by-side clearfix">
         
        <div>
          <em>Into This</em>
          <select id="countries" data-placeholder="选择国家..." class="chosen-select" style="width:350px;" tabindex="0">
            <option value=""></option>
            <optgroup label="北美">              
            <option value="Canada">加拿大</option>
            <option value="United States">美国</option>           
            
            <optgroup label="欧洲">   
            <option value="United Kingdom">英国</option>
             
            </optgroup>
            <optgroup label="亚洲">   
            <option value="China">中国</option>             
            </optgroup>
             
          </select>
          <select id="provinces" data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
          </select>
        </div>
      </div>
      
    </div>
  </div>
  <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
 
  <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      console.log(selector);
       console.log(config[selector]);
      $(selector).chosen(config[selector]);
    }
    
    var provinces=[];
    //provinces.push({'name':'China','provinces':[{'key':'gd','value':'广东'},{'key':'sh','value':'上海'} ]});
 
    provinces.push({'name':'China','provinces':{'gd':'广东','sh':'上海'}});
    provinces.push({'name':'Canada','provinces':{'adl':'安大略','wgh':'温哥华'}});
    provinces.push({'name':'United Kingdom','provinces':{'ld':'伦敦','bmh':'伯明翰'}});
    provinces.push({'name':'United States','provinces':{'ny':'纽约','dz':'德州'}});
    var searchProinceByCountry=function(country)
    {         
        for(var c in provinces)
        {
            if( provinces[c].name==country) 
                return provinces[c].provinces;             
        }
    }
     
  $(function()
  {
     $("#countries").change(function()
     {
     var msg='';
     var provs=searchProinceByCountry($(this).val());
     
     for(var c in provs)
        {        
             //msg=msg+'<option value="'+provs[c].key+'">'+provs[c].value+'</option>';
             msg=msg+'<option value="'+c.toString()+'">'+provs[c].toString()+'</option>';                 
        }
     console.log(msg);
     $("#provinces").html(msg);     
     $("#provinces").trigger("liszt:updated");
     //$("#provinces").trigger("chosen:updated");可能是新版本里换成这个了,感觉更有意义
     console.log($(this).val());
     console.log($("#provinces").val());
     });
     
    $("#provinces").change(function()
     {     
     console.log($(this).val());
     }); 
     
   });    
   
  </script>
  </form>

</body>
</html>

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>

  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
 
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
      <div class="side-by-side clearfix">
         
        <div>
          <em>Into This</em>
          <select id="countries" data-placeholder="选择国家..." class="chosen-select" style="width:350px;" tabindex="0">
            <option value=""></option>
            <optgroup label="北美">              
            <option value="Canada">加拿大</option>
            <option value="United States">美国</option>           
            
            <optgroup label="欧洲">   
            <option value="United Kingdom">英国</option>
             
            </optgroup>
            <optgroup label="亚洲">   
            <option value="China">中国</option>             
            </optgroup>
             
          </select>
          <select id="provinces" data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
          </select>
        </div>
      </div>
      
    </div>
  </div>
  <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
 
  <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
       
      $(selector).chosen(config[selector]);
    }
    
    
    
    var provinces=[];
    provinces.push({ 'China':{'gd':'广东','sh':'上海'}});
    provinces.push({ 'Canada':{'adl':'安大略','wgh':'温哥华'}});
    provinces.push({'United Kingdom':{'ld':'伦敦','bmh':'伯明翰'}});
    provinces.push({'United States':{'ny':'纽约','dz':'德州'}});
    
    var searchProinceByCountry=function(findCountry)
    {         
        for(var cIdx in provinces)
        {
            var country=provinces[cIdx];             
            for(var c in country)
            {
                if(c==findCountry)
                    return     country[c];        
            }            
        }
    }
    
     
     
  $(function()
  {
     $("#countries").change(function()
     {
     var msg='';
     var provs=searchProinceByCountry($(this).val());
     
     for(var c in provs)
        {        
             msg=msg+'<option value="'+c.toString()+'">'+provs[c].toString()+'</option>';                 
        }
     console.log(msg);
     $("#provinces").html(msg);     
     $("#provinces").trigger("liszt:updated");
     //$("#provinces").trigger("chosen:updated");可能是新版本里换成这个了,感觉更有意义
     console.log($(this).val());
     console.log($("#provinces").val());
     });
     
    $("#provinces").change(function()
     {     
     console.log($(this).val());
     }); 
     
   });    
   
  </script>
  </form>

</body>
</html>

 

posted @ 2016-10-27 23:49  zslm___  阅读(764)  评论(0)    收藏  举报