`

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

    博客分类：
  • json
 
阅读更多
做了一个用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>
0
顶
1
踩
分享到：
| OFBIZ 9.04模块化结构分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Json数据提取和解析

    它基于JavaScript的一个子集，但语法结构清晰，易于人类阅读和编写，同时也易于机器解析和生成。在本主题中，我们将深入探讨如何将数据库中的数据转化为JSON格式以及如何解析JSON数据。 首先，让我们理解如何将...

    select2demo

    在这个例子中，我们创建了一个初始的数据源，然后通过Select2的配置项实现了动态查询功能。当用户输入字符时，如果数据源是固定的，Select2会立即过滤；如果是通过Ajax获取，它会在输入达到最小长度时发送请求。当选...

    JQ JS javascript layui UI框架 带搜索下拉框 select

    以上就是一个基本的使用layui和jQuery实现带有搜索功能下拉框的例子。实际应用中，可能还需要处理更多细节，如错误处理、用户体验优化等。总的来说，这种技术结合了layui的美观界面和jQuery的便利性，为用户提供了一...

    基于Layui, 下拉选择框的多选解决方案

    `url`参数通常会指向一个返回JSON数据的接口，其中包含可供选择的项。每个项应至少包含一个用于显示的字段（如`name`）和一个用于值的字段（如`value`）。 最后，你可以利用Layui的`form`模块来监听用户的选择变化...

    客户端实现的多记录下拉选择列表框程序例子代码

    在Web应用程序开发中，"客户端实现的多记录下拉选择列表框"是一种常见的交互元素，它允许用户在下拉菜单中选择多个项目。这个程序例子代码，标题为"客户端实现的多记录下拉选择列表框程序例子代码"，旨在帮助开发者...

    jpath:像XPath for JSON

    这个例子中，`jpath.Select()`函数接收一个jpath表达式和JSON数据，然后返回匹配的结果。 总结起来，jpath是Go语言环境中用来查询和操作JSON数据的工具，它的设计灵感来源于XPath，提供了强大的查询语法，使得处理...

    js select下拉联动 更具级联性!

    JavaScript中的级联下拉联动是一种常见的前端交互设计，它允许用户在多个下拉菜单之间进行选择，其中每个下拉菜单的选项取决于前一个下拉菜单的选定值。在这个例子中，我们看到一个由三个`select`元素组成的级联下拉...

    下拉框多选

    在这个例子中，用户可以选择一个、多个或所有选项。在JavaScript中，我们可以使用jQuery或其他库来操作这些多选的下拉框，例如添加事件监听器以响应用户的选中状态变化。 CSDN（China Software Developer Network）...

    Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值_.docx

    在这个例子中，Servlet会创建一个JSONArray对象，将获取到的一级选项数据填充进去，然后使用`response.getWriter().write()`将JSON字符串写入HTTP响应。这样，当Ajax请求返回时，JavaScript的`success`回调就能接收...

    开源项目-thedevsaddam-gojsonq.zip

    在这个例子中，我们创建了一个`JsonQ`实例，然后通过`Get()`和`Path()`方法获取JSON对象中的属性，使用`String()`和`Int()`将结果转换为对应类型。 7. 应用场景：gojsonq适用于需要快速处理和查询JSON数据的Go项目...

    jQuery实现的多级级联下拉列表

    在网页设计中，级联下拉列表是一种常见的交互元素，它允许用户在多个下拉菜单之间建立关联，根据前一个菜单的选择动态更新后一个菜单的内容。这种功能在数据过滤、地区选择、分类导航等场景中非常实用。本教程将深入...

    Lumisoft.net pop3和imap接收邮件例子（asp的例子）

    在ASP.NET Web应用程序中，我们可以创建一个控制器或后台服务来定期检查新邮件。例如，可以创建一个定时任务，每隔一段时间调用POP3或IMAP的接收方法。同时，确保处理邮件时考虑到并发性和错误处理，以保证服务的...

    jquery-FillOptions级联菜单

    以下是一个完整的使用 FillOptions 插件构建级联菜单的例子： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery FillOptions 示例 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ...

    js实现省市区三级联动

    通常，我们会使用一个对象或者JSON格式的数据来存储省市区的关系。例如： ```javascript var addressData = { "北京": ["北京市", "延庆县", "昌平区"], "上海": ["上海市", "浦东新区", "徐汇区"], // ... }; `...

    IBM DB2通用数据库SQL入门.pdf

    - **视图**: 虚拟表，基于一个或多个表的结果集。 - **索引**: 提高查询性能的数据结构。 - **存储过程**: 预编译的SQL代码块，可重复调用。 #### 三、高级SQL特性 **1. 数据聚合** - **GROUP BY**: 将结果集...

    US-States-Select-List：美国各州的下拉列表

    在网页设计中，创建一个交互式的下拉列表可以让用户更便捷地从多个选项中选择，尤其是在处理地理位置数据时，如美国的州。标题"US-States-Select-List"所指的就是一个专用于展示美国各州的下拉列表组件。这个组件...

    三级联动.zip

    【标题】"三级联动.zip"所涉及的知识...总的来说，“三级联动.zip”提供的代码示例展示了Vue.js如何处理动态数据交互和用户界面更新，对于学习和实践前端开发，特别是Vue.js框架的开发者来说，是一个有价值的参考资料。

    js获取城市列表

    在JavaScript（简称JS）编程中，...对于初学者来说，这是一个了解AJAX请求、数据处理和DOM操作的好例子。而对于经验丰富的开发者，这个案例可能是一个基础的起点，可以扩展为更复杂的地理信息系统或者智能推荐系统。

    jquery autocomplete php应用

    在这个例子中，我们简单地过滤了一个静态数组，但在实际应用中，你可能需要从数据库中查询数据。你可以使用像MySQL或PDO这样的数据库连接库，根据关键词执行SQL查询，并将结果集转化为JSON。 最后，别忘了在服务器...

    Hive高级编程经验分享.pdf

    在大数据处理领域，Apache Hive是一个广泛使用的数据仓库工具，它允许用户通过SQL（Hive QL）查询语言来处理存储在分布式存储系统如HDFS上的大规模数据集。本篇文章将深入探讨Hive的组件、MapReduce的工作原理以及...

Magicbox
Global site tag (gtag.js) - Google Analytics