用json来过滤多个select的一个例子

最新推荐文章于 2024-05-18 16:25:44 发布
最新推荐文章于 2024-05-18 16:25:44 发布
阅读量96 收藏
点赞数
分类专栏： json 文章标签： json javascript ViewUI
做了一个用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>
ylq365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
读取一个文件中的多个json数据
09-22
读取一个文件中的多个json数据,可能还存在一些bug.为什么要超过50个字!看不起我的概括能力吗?
Python操作json数据的一个简单例子
01-20
下面给出一个使用python解析json的简单例子： 复制代码 代码如下: #!/usr/bin/python import json #Function:Analyze json script #Json is a script can descript data structure as xml, #for detail, please ...
在json格式中筛选指定条件的数据
weixin_44923449的博客
04-01 2712
在json格式中筛选指定条件的数据
Postgre数据库Jsonb字段json条件过滤
Lenjor 的博客
12-27 1598
Postgre Jsonb 条件过滤
mysql根据json数据过滤
https://gitee.com/hello-piper/PiperChat
04-17 3157
表中一个字段存储的为json数据，如果想根据这个json的某个字段来筛选数据，如何做？ SELECT * FROM `table` WHERE table.json -> '$.name' = '碳钢';
[Vue]遍历JSON数据渲染多个下拉框selected，并赋初始值
iChangebaobao的博客
08-30 1935
JSON数据 specInfo:[ { spec_id:1 spec_name:'长度'， spec_V:[ { spec_value_id:10 spec_value:'120cm' }， { spec_value_id:11 spec_value:'100cm' } ] }, { spec_i...
json-filter 一个golang的json字段过滤器，随心所欲的构造自己的json数据结构，随意复用结构体的开源项目。
weixin_45405207的博客
03-08 1449
有时候你可能会遇到这种情况：一个结构体想要在不同的接口下返回不同的json数据字段。 举个例子： 一个模拟用户的model，真实环境中的字段会要比这个多得多。 type User struct { UID uint `json:"uid"` Avatar string `json:"avatar"` Nickname string `json:"nickname"` Sex int `json:"sex"` VipEndTime time.Ti
ajax data多个对象,ajax提交复杂对象数据
weixin_39626298的博客
08-05 434
public class RouteItemManageReq {private List targetNodes;private RouteItemReq obj;public List getTargetNodes() {return targetNodes;}public void setTargetNodes(List targetNodes) {this.targetNodes = ta...
APIJSON使用例子总结
weixin_41077841的博客
12-06 6707
虽然apijson的通用文档中提供了很多例子，但是这些例子我在使用中感觉不能直接粘贴使用，不怎么直观，所以这里在通用文档的基础上增加了apijson使用例子的总结，同时这里需要说明一下，apijson所说的官方文档 https://vincentcheng.github.io/apijson-doc 其实并不是最新的文档以及涉及的相关例子并不全面，可做简单的入门，但不能做为手册来做，这里开发者目前推荐的是通用文档 https://github.com/Tencent/APIJSON/blob/maste
阿里云大数据实战记录8：拆开 json 的每一个元素，一行一个
明而决之
08-29 1285
本文分别通过 pgsql、ODPS SQL 和 MySQL 三种 SQL 语法进行 json 类型的处理。其中，使用 pgsql 处理方式最简单且简洁，而 ODPS SQL 最复杂，中间进行了多次数据类型的变更，甚至还需要使用一种更少见的数据类型 map 类型来辅助处理；而 MySQL 则处于二者之间。
Shell脚本使用jq解析json
BX_Jobs的博客
11-01 3174
Shell脚本使用jq解析json
一个基于json 类 SQL 语言 jsql 过滤 JavaScript 对象的库
06-05
jsql 是一种 JavaScript 查询语言，以及一个简单的 JavaScript 对象 (POJSO) 参考实现。 这不是为了搜索 dom、jQuery 或某些特定数据库，也不是为了在浏览器中启用 SQL。jsql 旨在为查询任何内容提供原生 JSON 查询...
json-server-multiple-files:使用多个文件运行json-server
05-26
JSON服务器多个文件/资源JSON服务器： ： 安装全局安装 npm install -g json-server安装本地 npm install结构 ├── README.md├── fakeapis│ ├── index.js│ ├── posts.json│ └── users.json├─...
JS根据json数组多个字段排序及json数组常用操作
12-10
* @param attr 排序的属性 ['name','sex'...],根据一个字段或者多个字段排序 * @param rev true表示升序排列，false降序排序 * */ function sortByArr(arr, rev) { if (rev == undefined) {
select2使用示例
weixin_34237596的博客
09-13 660
为什么80%的码农都做不了架构师？>>> ...
Ubuntu22.04本地部署qwen模型、jupyterlab开发环境、LoRA微调全流程-续
最新发布
weixin_42118737的博客
05-18 656
接着上一篇，在Ubuntu22.04本地部署qwen模型，准备数据，进行LoRA微调。
用Json.net for Unity来解析一个json文件
06-13
在这个例子中，我们首先使用Resources.Load()方法加载了一个名为"person"的文本资源，然后使用JsonConvert.DeserializeObject()方法将JSON字符串转换为Person对象。最后，我们输出了person对象的name和age属性。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值