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