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>&nbsp;
 
 <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

 

posted @ 2008-07-03 11:15  南守拥  阅读(1916)  评论(0)    收藏  举报