做了一个用json过滤select的一个学习的例子，记下来。
优化后的代码：
<html>
<head></head>
<script type="text/javascript">
function select(){
this.countryList=["china","china1","china2"];
this.countryStore={"china":[{"storeName":"store1","storeID":"001"},{"storeName":"store2","storeID":"002"}]};
this.countryProvince={"china":["广东省","河南省"]};
this.provinceCity={"广东省":["广州市","深圳市"],"河南省":["郑州市","洛阳市","南阳市","开封市"]};
this.provinceStore = {"广东省":[{"storeName":"广州店1","storeID":"001"},{"storeName":"广州店2","storeID":"002"}],"河南省":[{"storeName":"郑州店1","storeID":"003"},{"storeName":"郑州店2","storeID":"004"}]};
this.cityStore = {"广州市":[{"storeName":"广州店1","storeID":"1"},{"storeName":"广州店2","storeID":"2"}],"郑州市":[{"storeName":"郑州店1","storeID":"3"},{"storeName":"郑州店2","storeID":"4"}]};
}
</script>
<body>
<select name="countryId" id="countryId" onChange="javascript:updateProvinceByCountry(this.value);updateStoreByCountry(this.value);">
<option value="">country</option>
</select>
<select name="provinceId" id="provinceId" onChange="javascript:updateStoreByProvince(this.value);updateCityByProvince(this.value);">
<option value="">province</option>
</select>
<select name="cityId" id="cityId" onChange="javascript:updateStoreByCity(this.value);">
<option value="">city</option>
</select>
<select name="storeId" id="storeId">
<option value="">store</option>
</select>
<script type="text/javascript">
var testFunction = new select();
/*连接字符串的函数，返回一下数组对象*/
function joinString(a,b){
var mycars=new Array();
mycars[0]= "a";
mycars[1]= ".";
mycars[2]= b;
var str = mycars.join("");
return eval(str);
}
/*清除select的所有选择项，并添加新的选择项*/
function cleanSelectAndAddNewOptions(selectObj,dataArray,flagValue){
selectObj.options.length = 0;
selectObj.options.add(new Option("All",""));
for(var i = 0 ; i < dataArray.length; i ++){
if(flagValue == 1){
selectObj.options.add(new Option(dataArray[i].storeName,dataArray[i].storeID));
}else if(flagValue == 0){
selectObj.options.add(new Option(dataArray[i],dataArray[i]));
}
}
}
/*根据城市来更新商店可选项*/
function updateStoreByCity(city){
var cityStore = testFunction.cityStore;
var storeArray = joinString(cityStore,city);
var storeObj = document.getElementById('storeId');
cleanSelectAndAddNewOptions(storeObj,storeArray,1);
}
/*根据省份来更新城市可选项*/
function updateCityByProvince(province){
var provinceCity = testFunction.provinceCity;
var cityArray = joinString(provinceCity,province);
var cityObj = document.getElementById('cityId');
cleanSelectAndAddNewOptions(cityObj,cityArray,0);
}
/*根据省份更新商店的可选项*/
function updateStoreByProvince(province){
var provinceStore = testFunction.provinceStore;
var storeArray = joinString(provinceStore,province);
var storeObj = document.getElementById('storeId');
cleanSelectAndAddNewOptions(storeObj,storeArray,1);
}
/*根据国家来更新商店的可选项*/
function updateStoreByCountry(country){
if(country == "china"){
var countryStore = testFunction.countryStore;
var storeArray = joinString(countryStore,country);
var storeObj = document.getElementById('storeId');
cleanSelectAndAddNewOptions(storeObj,storeArray,1);
}
}
/*根据国家来更新省份的可选项*/
function updateProvinceByCountry(country){
if(country == "china"){
var countryProvince = testFunction.countryProvince;
var provinceArray = joinString(countryProvince,country);
var provinceObj = document.getElementById('provinceId');
cleanSelectAndAddNewOptions(provinceObj,provinceArray,0);
}
}
/*初始化国家可选项*/
function initCountrySelect(){
var selObj = document.getElementById('a');
var countryList = testFunction.countryList;
if(countryList.length > 0){
var countryObj = document.getElementById('countryId');
countryObj.options.length = 0;
countryObj.options.add(new Option("All",""));
for(var i = 0 ; i < countryList.length; i ++){
countryObj.options.add(new Option(countryList[i],countryList[i]));
}
}
}
initCountrySelect();//初始化国家数据
</script>
</body>
</html>优化前用另一个select来存数据的代码：
<html>
<head></head>
<body>
<div id="storeDiv" >
<select name="a" id="a">
<option value='["china","china1","china2"]'>countryList</option>
<option value='{"china":[{"storeName":"store1","storeID":"00151010002"},{"storeName":"store2","storeID":"002"}]}'>countryStore</option>
<option value='{"china":["广东省","河南省"]}'>countryProvince</option>
<option value='{"广东省":["广州市","深圳市"],"河南省":["郑州市","洛阳市","南阳市","开封市"]}'>provinceCity</option>
<option value='{"广东省":[{"storeName":"广州店1","storeID":"001"},{"storeName":"广州店2","storeID":"002"}],"河南省":[{"storeName":"郑州店1","storeID":"003"},{"storeName":"郑州店2","storeID":"004"}]}'>provinceStore</option>
<option value='{"广州市":[{"storeName":"广州店1","storeID":"001"},{"storeName":"广州店2","storeID":"002"}],"郑州市":[{"storeName":"郑州店1","storeID":"003"},{"storeName":"郑州店2","storeID":"004"}]}'>cityStore</option>
</select>
</div>
<select name="countryId" id="countryId" onChange="javascript:updateProvince(this.value);updateStore(this.value);">
<option value="">country</option>
</select>
<select name="provinceId" id="provinceId" onChange="javascript:updateStoreByProvince(this.value);updateCityByProvince(this.value);">
<option value="">province</option>
</select>
<select name="cityId" id="cityId" onChange="javascript:updateStoreByCity(this.value);">
<option value="">city</option>
</select>
<select name="storeId" id="storeId">
<option value="">store</option>
</select>
<script type="text/javascript">
function updateStoreByCity(city){
var selObj = document.getElementById('a');
var cityStore = eval('(' + selObj.options[5].value + ')');
var mycars=new Array();
mycars[0]= "cityStore";
mycars[1]= ".";
mycars[2]= city;
var str = mycars.join("");
var storeArray = eval(str);
var storeObj = document.getElementById('storeId');
storeObj.options.length = 0;
storeObj.options.add(new Option("All",""));
for(var i = 0 ; i < storeArray.length; i ++){
storeObj.options.add(new Option(storeArray[i].storeName,storeArray[i].storeID));
}
}
function updateCityByProvince(province){
var selObj = document.getElementById('a');
var provinceCity = eval('(' + selObj.options[3].value + ')');
var mycars=new Array();
mycars[0]= "provinceCity";
mycars[1]= ".";
mycars[2]= province;
var str = mycars.join("");
var cityArray = eval(str);
var cityObj = document.getElementById('cityId');
cityObj.options.length = 0;
cityObj.options.add(new Option("All",""));
for(var i = 0 ; i < cityArray.length; i ++){
cityObj.options.add(new Option(cityArray[i],cityArray[i]));
}
}
function updateStoreByProvince(province){
var selObj = document.getElementById('a');
var provinceStore = eval('(' + selObj.options[4].value + ')');
var mycars=new Array();
mycars[0]= "provinceStore";
mycars[1]= ".";
mycars[2]= province;
var str = mycars.join("");
var storeArray = eval(str);
var storeObj = document.getElementById('storeId');
storeObj.options.length = 0;
storeObj.options.add(new Option("All",""));
for(var i = 0 ; i < storeArray.length; i ++){
storeObj.options.add(new Option(storeArray[i].storeName,storeArray[i].storeID));
}
}
function updateStore(country){
if(country == "china"){
var selObj = document.getElementById('a');
var countryStore = eval('(' + selObj.options[1].value + ')');
var mycars=new Array();
mycars[0]= "countryStore";
mycars[1]= ".";
mycars[2]= country;
//mycars[3]= "[0]";
var str = mycars.join("");
var storeArray = eval(str);
var storeObj = document.getElementById('storeId');
storeObj.options.length = 0;
storeObj.options.add(new Option("All",""));
for(var i = 0 ; i < storeArray.length; i ++){
storeObj.options.add(new Option(storeArray[i].storeName,storeArray[i].storeID));
}
}
}
function updateProvince(country){
if(country == "china"){
var selObj = document.getElementById('a');
var countryProvince = eval('(' + selObj.options[2].value + ')');
var mycars=new Array();
mycars[0]= "countryProvince";
mycars[1]= ".";
mycars[2]= country;
//mycars[3]= "[0]";
var str = mycars.join("");
var provinceArray = eval(str);
var provinceObj = document.getElementById('provinceId');
provinceObj.options.length = 0;
provinceObj.options.add(new Option("All",""));
for(var i = 0 ; i < provinceArray.length; i ++){
provinceObj.options.add(new Option(provinceArray[i],provinceArray[i]));
}
}
}
function initCountrySelect(){
var selObj = document.getElementById('a');
eval("var country = " +selObj.options[0].value);
if(country.length > 0){
for(var i = 0 ; i < country.length; i ++){
var countryObj = document.getElementById('countryId');
countryObj.options.length = 0;
countryObj.options.add(new Option("All",""));
for(var i = 0 ; i < country.length; i ++){
countryObj.options.add(new Option(country[i],country[i]));
}
}
}
}
initCountrySelect();
</script>
</body>
</html>