用json来过滤多个select的一个例证
日期：2014-05-16 浏览次数：20442 次
用json来过滤多个select的一个例子
做了一个用json过滤select的一个学习的例子，记下来。
优化后的代码：
做了一个用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 =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
