<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxSelect 多级联动下拉菜单</title>
<style>
body{padding:20px;background:#ddd;font:14px/1.7 Arial,"\5b8b\4f53";}
h1,h2,h3{font:bold 36px/1 "\5fae\8f6f\96c5\9ed1";}
h2{font-size:20px;}
h3{font-size:16px;}
fieldset{margin:1em 0;}
fieldset legend{font:bold 14px/2 "\5fae\8f6f\96c5\9ed1";}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}
.wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div class="wrap">
<h1>jQuery cxSelect 多级联动下拉菜单</h1>
<h2>示例</h2>
<fieldset id="city_china">
<legend>默认</legend>
<p>省份:<select class="province" disabled="disabled" name="province"></select></p>
<p>城市:<select class="city" disabled="disabled" name="city"></select></p>
<p>地区:<select class="area" disabled="disabled" name="area"></select></p>
</fieldset>
<fieldset id="city_china_val">
<legend>设置默认值及选项标题</legend>
<p>所在地区:
<select class="province" data-value="浙江省" data-first-title="选择省" disabled="disabled"></select>
<select class="city" data-value="杭州市" data-first-title="选择市" disabled="disabled"></select>
<select class="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" disabled="disabled"></select>
<select class="city" disabled="disabled"></select>
<select class="region" disabled="disabled"></select>
</p>
</fieldset>
<fieldset id="city_custom">
<legend>自定义选项</legend>
<p>一:<select class="first" data-value="Boolean" disabled="disabled"></select></p>
<p>二:<select class="second" data-value="0" disabled="disabled"></select></p>
<p>三:<select class="third" disabled="disabled"></select></p>
<p>四:<select class="fourth" disabled="disabled"></select></p>
<p>五:<select class="fifth" disabled="disabled"></select></p>
</fieldset>
</div>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.cxselect.min.js"></script>
<script>
$.cxSelect.defaults.url = 'js/cityData.min.json';
$('#city_china').cxSelect({
selects: ['province', 'city', 'area']
});
$('#city_china_val').cxSelect({
selects: ['province', 'city', 'area'],
nodata: 'none'
});
$('#global_location').cxSelect({
url: 'js/globalData.min.json',
selects: ['country', 'state', 'city', 'region'],
nodata: 'none'
});
$('#city_custom').cxSelect({
selects: ['first', 'second', 'third', 'fourth', 'fifth'],
required: true,
url: [
{'v': 1, 'n': '第一级 >', 's': [
{'v': 2, 'n': '第二级 >', 's': [
{'v': 3, 'n': '第三级 >', 's': [
{'v': 4, 'n': '第四级 >', 's': [
{'v': 5, 'n': '第五级 >', 's': [
{'v': 6, 'n': '第六级 >', 's': [
{'v': 7, 'n': '第七级 >', 's': [
{'v': 8, 'n': '第八级 >', 's': [
{'v': 9, 'n': '第九级 >', 's': [
{'v': 10, 'n': '第十级'}
]}
]}
]}
]}
]}
]}
]}
]}
]},
{'v': 'Number', 'n': '数字 >', 's': [
{'v': 'Dice', 'n': '骰子 >', 's': [
{'v': 'Small', 'n': '小', 's': [
{'n': '4'},
{'n': '5'},
{'n': '6'},
{'n': '7'},
{'n': '8'},
{'n': '9'},
{'n': '10'}
]},
{'v': 'Big', 'n': '大', 's': [
{'n': '11'},
{'n': '12'},
{'n': '13'},
{'n': '14'},
{'n': '15'},
{'n': '16'},
{'n': '17'}
]}
]},
{'v': 'Hundred', 'n': '百位', 's': [
{'n': '100'},
{'n': '200'},
{'n': '300'},
{'n': '400'},
{'n': '500'},
{'n': '600'},
{'n': '700'},
{'n': '800'},
{'n': '900'}
]},
{'v': 'Thousand', 'n': '千位', 's': [
{'n': '1000'},
{'n': '2000'},
{'n': '3000'},
{'n': '4000'},
{'n': '5000'},
{'n': '6000'},
{'n': '7000'},
{'n': '8000'},
{'n': '9000'}
]}
]},
{'v': 'ABC', 'n': '字母 >', 's': [
{'v': 'Upper case', 'n': '大写 >', 's': [
{'n': 'A'},
{'n': 'B'},
{'n': 'C'},
{'n': 'D'},
{'n': 'E'},
{'n': 'F'},
{'n': 'G'}
]},
{'v': 'Lower case', 'n': '小写 >','s': [
{'n': 'a'},
{'n': 'b'},
{'n': 'c'},
{'n': 'd'},
{'n': 'e'},
{'n': 'f'},
{'n': 'g'}
]}
]},
{'v': 'Boolean','n': '真假 >', 's': [
{'v': true ,'n': '真 (Ture)'},
{'v': false ,'n': '假 (False)'},
{'v': 1 ,'n': '真 (1)'},
{'v': 0 ,'n': '假 (0)'}
]},
{'n': '无子级'}
]
});
</script>
</body>
</html>