複数のselectの一例をjsonでフィルタリングする
14535 ワード
jsonでselectをフィルタリングする学習の例を作って、メモします.
最適化されたコード:
最適化前に別の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>