`
xxtianxiaxing
  • 浏览: 707284 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

动态添加选择区

    博客分类:
  • web
阅读更多
<script type="text/javascript">
            if (window.ActiveXObject && !window.XMLHttpRequest){
                window.XMLHttpRequest=function(){
                    return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
                };
            }//取得XMLHttpRequest对象     
            var req;
            var flagSelect;
            var hereClasses = new Array(3);
            
            function testName(flag,obj)//使用Ajax访问服务器
      		{
      			 var value = obj.value;
	             flagSelect = flag; //标记一下当前是选择省,还是选择市
	             if(flagSelect == "1"){
	             	//hereClasses[0] = obj.options[obj.selectedIndex].text;
	             	//document.getElementById("hereClassDiv").innerHTML = hereClasses[0];
	             }
	             if(flagSelect == "2"){
	             	//hereClasses[1] = obj.options[obj.selectedIndex].text;
	             	//document.getElementById("hereClassDiv").innerHTML = hereClasses[0] + " > " + hereClasses[1];
	             }
	             if(flagSelect == "3"){
	             	//hereClasses[2] = obj.options[obj.selectedIndex].text;
	             	//document.getElementById("hereClassDiv").innerHTML = hereClasses[0] + " > " + hereClasses[1] + " > " + hereClasses[2];
	             	return;
	             }
	             req=new XMLHttpRequest();
	             if (req) 
	             {
	                 req.onreadystatechange=setValue;
	             }
	             req.open('POST',"hereClassSelect.do?method=selectHereClass&flag="+flag+"&value="+value);//把参数带到服务器中
	             req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	             req.send(null);
	         }
            function setValue()
            {
                if (req.readyState==4 )//访问到服务器
                {           
                    if(req.status==200)//正确返回
                    {    
                        if(flagSelect=="1")//如果选择某个省要更新市和区
                        {
                            var v=req.responseText;//req.responseText是服务器返回来的字符串
                            paint(document.getElementById("hereSecondClass"),v); //更新市下拉框
                            paint(document.getElementById("hereThirdClass"),"");  //清空区下拉框
                            
                        }
                        if(flagSelect=="2")//如果选择某市,只需改变区
                        {
                            var v=req.responseText;
                            paint(document.all("hereThirdClass"),v); //更新区下拉框
                        }
                    }
                }
            }
            function paint(obj,value)//根据一对数据去更新一个下拉框
            {
                 var v=value.split(";");   //得到一些数据,(修改过了..)
                 obj.options.length=0;   //先清空原来的数据
                    
                 for(var i=0;i<v.length-1;i++)//把新得到的数据显示上去
                 {
                     var option = new Option(v[i].split(",")[1], v[i].split(",")[0]);
                     obj.add(option);
                 }
            }   
        </script>


	<select id="hereFirstClass" name="hereFirstClass" style="width:130"
									size="8" onchange="testName(1,this);">
									<c:forEach items="${hereFirstClasses}" var="hereFirstClass" >
										<option value="${hereFirstClass.id }">${hereFirstClass.classNameZh }</option>
									</c:forEach>
									
								</select>

								<select id="hereSecondClass" name="hereSecondClass" style="width:130"
									size="8" onchange="testName(2,this);">
								</select>

								<select id="hereThirdClass" name="hereSecondClass" style="width:130"
									size="8" onchange="testName(3,this);">
								</select>
								<div class="add_Delete"><input type="button" value="↓填加" onclick="addline()"/>
      <input type="button" value="x 删除" onclick="delline()"/></div>
      <script type="text/javascript" >
      	function addline() {
      		var num = document.getElementById("select1");
      		if(num.length>5) {
      			alert("最多只能添加6行");
      			return false;
      		}
      		var obj;
      		obj = document.createElement("option");
      		
      		var obj1 = document.getElementById("hereFirstClass");
      		var obj2 = document.getElementById("hereSecondClass");
      		var obj3 = document.getElementById("hereThirdClass");
      		if(document.getElementById("hereFirstClass").value=="") {
      			alert("请选择主营行业");
      			return false;
      		}
      		var hereFirstValue = document.getElementById("hereFirstClass").value;
			var hereFirstName = document.getElementById("hereFirstClass").options[obj1.selectedIndex].text;
      		
      		if(document.getElementById("hereSecondClass").value=="") {
      			obj.value = hereFirstValue;
      			obj.text = hereFirstName;
      			document.getElementById("select1").add(obj);
      		}else if(document.getElementById("hereThirdClass").value=="") {
      			var hereSecondValue = document.getElementById("hereSecondClass").value;
      			var hereSecondName = document.getElementById("hereSecondClass").options[obj2.selectedIndex].text;
      			obj.value = hereFirstValue+"//"+hereSecondValue;
      			obj.text = hereFirstName+"//"+hereSecondName;
      			document.getElementById("select1").add(obj);
      		}else{
      			var hereThirdValue = document.getElementById("hereThirdClass").value;
      			var hereThirdName = document.getElementById("hereThirdClass").options[obj3.selectedIndex].text;
      			var hereSecondValue = document.getElementById("hereSecondClass").value;
      			var hereSecondName = document.getElementById("hereSecondClass").options[obj2.selectedIndex].text;
      			obj.value = hereFirstValue+"//"+hereSecondValue+"//"+hereThirdValue;
      			obj.text = hereFirstName+"//"+hereSecondName+"//"+hereThirdName;
      			document.getElementById("select1").add(obj);
      		}
      		
      	}
      	
      	function delline() {
      		document.all.select1.options.remove(document.all.select1.selectedIndex);
      		document.all.select1.selectIndex=0;
      	}
      
      </script>
      
分享到:
评论

相关推荐

    ios-tableview 动态添加.zip

    "ios-tableview 动态添加.zip"这个压缩包很可能包含了一个示例项目,演示如何在运行时动态地向UITableView添加数据。在这里,我们将深入探讨在iOS应用中动态加载UITableView的相关知识点。 首先,UITableView的动态...

    PB写的动态生成下拉菜单的源代码

    3. **添加菜单项**:使用List Control或ComboBox的AddItem方法逐个添加菜单项。每个菜单项通常对应数据源中的一个记录或一个值。 4. **事件绑定**:动态创建的菜单项可能需要关联不同的事件处理函数。例如,当用户...

    android 省市区选择

    在Android应用开发中,省市区选择是一个常见的功能,通常用于用户填写地址信息或者进行地理位置相关的操作。本节将深入探讨如何在Android中实现一个省市区选择的弹出框。 首先,我们需要理解Android的UI组件系统。...

    jq省市联动 添加及修改 默认值

    在添加地址的过程中,"存入给后台的是汉字"意味着我们在提交表单时,需要将用户选择的省市区名称以汉字形式发送到服务器。这是因为汉字更容易理解,也便于数据库存储和检索。在前端,我们可以通过jQuery获取选中的...

    日期选择添加

    在前端展示上,`日期添加.html`可能是页面模板,包含日期选择器、星期选择器以及结果显示区。当用户提交选择后,JavaScript会更新结果区域,列出所有符合条件的日期。 总的来说,这个功能的实现涉及到HTML表单设计...

    中兴网管添加邻区方法.doc

    首先选择源 ENodeB和邻接 ENodeB,然后添加需要添加的邻区关系,添加完成之后同步。 中兴网管添加邻区方法可以通过配置管理界面或邻区调整工具实现,都是为了实现基站之间的无线连接关系和 HANDOVER。

    Android地名选择器 全国省市区选择器 城市选择 区县选择

    "Android地名选择器 全国省市区选择器 城市选择 区县选择"是一个针对这种需求的专业组件,它允许用户在应用程序内方便地挑选中国境内的省份、城市以及区县。这个组件通常包含一个层次化的列表视图,用户可以逐级下拉...

    uniapp、小程序 省市区选择,拉起弹窗选择

    在创建交互丰富的用户体验时,用户可能会需要选择省市区这样的地理信息,这就涉及到了`uniapp`中的组件和事件处理。本篇将详细介绍如何在`uniapp`中实现省市区选择功能,并通过弹窗进行展示。 首先,`uniapp`提供了...

    地区选择器android studio做的.7z

    3. **`WheelView`实例化**:在布局文件中添加`WheelView`,或者在代码中动态创建。设置其属性,如字体大小、颜色、背景等。 4. **事件监听**:添加滚动监听,以便在用户选择时触发相应操作,如更新其他`Wheel`的...

    Myeclipse中添加类库

    回到 MyEclipse 的工作区,右键点击你要添加类库的项目(例如 `ccbb` 项目),选择 `属性`(Properties)或 `添加库`(Add Library)。在弹出的对话框中,选择 `用户库`,然后在列表中找到你刚才创建的 `oracle...

    MATLAB向当前搜索路径添加文件夹和子文件夹

    2. 在工作区或命令窗口中,找到你想要添加的文件夹的位置。 3. 通过鼠标选择该文件夹,然后右键点击并选择“添加到路径”。 4. 在弹出的菜单中,有两个选项:“选定的文件夹”和“选定的文件夹和子文件夹”。选择后...

    Android省市区三级联动滚轮选择——Cascade_Master

    适配器会根据当前选择的级别(省、市、区)动态地更新可选项,并将这些选项传递给滚轮选择器。 3. 事件监听:组件需要监听滚轮的选择变化,当用户滚动并选择一个选项时,触发事件处理函数,更新其他级别的数据,并...

    批量添加文件往rar压缩包工具rarbat

    在文件选择区,你可以通过点击“添加文件”或“添加目录”按钮,将需要压缩的文件或文件夹导入。支持拖放操作,方便快捷。 其次,设置压缩参数。RARBAT提供了丰富的压缩选项,包括压缩级别、压缩方法、加密等。压缩...

    Geoserver添加shp地图的方法

    在新打开的页面中,Name命名为mystyle,在代码区添加代码(附加代码1),添加代码后,点击页面中的Validate按钮,如果代码没有问题,在页面的顶部会提示“No validation errors”,然后点击Submit提交。 二、添加...

    城市三级联动js前端显示动态加载

    4. 动态渲染:在事件监听器内部,使用`innerHTML`或模板字符串动态创建`option`元素,并将其添加到相应的选择框中。 5. 最后,当用户在`district`选择框中选择后,可以触发其他业务逻辑,如提交表单或调用API。 ...

    VS之动态库调试

    - 在测试应用程序中,通过“项目”-&gt;“添加引用”或“链接器”-&gt;“输入”下的“附加依赖项”添加动态库的.lib文件。 - 使用`LoadLibrary`和`GetProcAddress`函数动态加载动态库,或者静态链接到库。 - 设置断点在...

    symantec___杀毒软件添加信任文件攻略.docx

    如果在添加信任前已经点击过大辞典,那么我们需要使用补救方法2:打开Symantec Endpoint Protection,查看隔离区,右键选择被隔离文件,选择还原,确认即可。这将让Symantec Endpoint Protection将被隔离的文件还原...

    MFC添加背景图片MFC添加背景图片

    MFC添加背景图片 MFC是Microsoft Foundation Classes的缩写,是一个基于Windows API的C++类库。它提供了许多有用的类和函数,帮助开发者快速构建Windows应用程序。在MFC中,添加背景图片是非常常见的需求,特别是在...

    PCB英文版中添加汉字

    3. **创建汉字文本对象**:在PCB设计界面,选择“放置”(Place)菜单中的“文本”(Text)工具,然后在工作区中点击鼠标左键,输入汉字。此时,你应该能在编辑框中看到汉字。 4. **选择放置层次**:汉字可以添加在...

    仿照京东添加地址特效

    这个特效通常包括一个下拉选择器,用户可以选择省、市、区(县)等不同级别的行政区域,以精确地输入他们的收货地址。这种功能可以提高用户的操作效率,同时保证地址信息的准确性和一致性。 首先,我们需要理解这个...

Global site tag (gtag.js) - Google Analytics