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
转载于:https://www.cnblogs.com/nanshouyong326/archive/2008/07/03/1234604.html
相关资源：数据结构—成绩单生成器