dojo 级联下拉框
dojo 级联下拉框
效果图
----------- country_en.json -------------------
{identifier:"code",
items:[
{code:"AF",name:"Afghanistan"},
{code:"AL",name:"Albania"},
{code:"AO",name:"Angola"},
{code:"AR",name:"Argentina"},
{code:"AS",name:"American Samoa"},
{code:"AT",name:"Austria"},
{code:"AU",name:"Australia"}
................................
]}
----------- city_en.json -----------
{identifier:"abbreviation",
items:[
{abbreviation:"AAB",name:"ARRABURY QL",type:"AF"},
{abbreviation:"AAC",name:"AL-ARISH",type:"AF"},
{abbreviation:"AAE",name:"ANNABA",type:"AF"},
{abbreviation:"AAI",name:"ARRAIAS TO",type:"AL"},
{abbreviation:"AAL",name:"AALBORG",type:"AL"},
{abbreviation:"AAO",name:"ANACO",type:"AL"},
{abbreviation:"AAR",name:"AARHUS",type:"AL"},
{abbreviation:"AAV",name:"ALAH",type:"AO"},
{abbreviation:"AAX",name:"ARAXA MG",type:"AO"},
................................................
]}
主要页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo ComboBox Widget Test</title>
<style>
@import "http://www.cnblogs.com/../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
</style>
<script type="text/javascript" src="http://www.cnblogs.com/../dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
function setCountry(value) {
var countrySelect= dijit.byId('countryCombo');
var cityCombo = dijit.byId('cityCombo');
cityData = new dojo.data.ItemFileReadStore({url: 'city_en.json'});
cityCombo.store=cityData;
cityCombo.query = {type: "" + countrySelect.item['code']};
cityCombo._startSearch();
}
</script>
</head>
<body>
<div dojoType="dojo.data.ItemFileReadStore" jsId="countryData"
url="country_en.json"></div>
<select id="countryCombo"
dojoType="dijit.form.ComboBox"
store="countryData"
name="countryList"
searchAttr="name"
onChange="setCountry"
autoComplete="true" >
</select>
<select id="cityCombo"
name="cityList"
dojoType="dijit.form.ComboBox"
searchAttr="name"
autoComplete="true">
</select>
</body>
</html>
注: 我使用的是dojo-release-1.0.2版本,
此测试代码放在该源代码dojo-release-1.0.2\dojo-release-1.0.2\dijit\tests\form下即可,
是参照form下的test_ComboBox.html
.jpg)
