论坛首页 Web前端技术论坛

jQuery + JS 下拉框加载选择 (练练而已)

浏览 9485 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-01-11  
<html>
<head>
<title>Next join Test</title>
<style type="text/css">
	.font-color{
		width:150px;
		height: 200px;
		color: rgb(79,129,189)
	}
	#div1{border:1px solid #000; width: 50%; position:relative; top: 20%; background-color: #ccc;}
	#province{position:relative; top: -170px; left: 10px;}
	#div2{border:1px solid #000; width: 50%; position:relative; top: 19%; background-color: #ccc;}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">

var simpleNodes =[
               	{ id:1, pId:0, name:"手机", ename:"Mobile", open:true},
               	{ id:11, pId:1, name:"诺基亚", ename:"Nokia"},
               	{ id:111, pId:11, name:"C6(音乐版)", ename:"C6(Music)"},
               	{ id:112, pId:11, name:"X6(导航版)", ename:"X6(GPS)"},
               	{ id:113, pId:11, name:"5230(世博版)", ename:"5230(SB)"},
               	{ id:114, pId:11, name:"N97mini", ename:"N97mini"},
               	{ id:12, pId:1, name:"三星", ename:"Samsung"},
               	{ id:121, pId:12, name:"I9000(联通版)", ename:"I9000(Unicom)"},
               	{ id:122, pId:12, name:"I9000(移动版)", ename:"I9000(China Mobile)"},
               	{ id:123, pId:12, name:"Galaxy Naos", ename:"Galaxy Naos"},
               	{ id:124, pId:12, name:"Fascinate", ename:"Fascinate"},
               	{ id:13, pId:1, name:"索爱", ename:"Sony Ericsson"},
               	{ id:131, pId:13, name:"U1i(Satio)", ename:"U1i(Satio)"},
               	{ id:132, pId:13, name:"U5i(Vivaz)", ename:"U5i(Vivaz)"},
               	{ id:133, pId:13, name:"X10i", ename:"X10i"},
               	{ id:134, pId:13, name:"Aino mini", ename:"Aino mini"}];

//初始化加载province
function province(){
	for(i=0; i < simpleNodes.length; i++ ){
		if(simpleNodes[i].pId == "1"){
			var newoption = document.createElement("option");
			newoption.text = simpleNodes[i].name;
			newoption.value = simpleNodes[i].id;
			form1.province.options.add(newoption);
		}
	}
}

$(function(){
	
	$("#province").change(function(){
		var value = this.value;
		var len = form1.city.length;
		if(len > 0){
		 	$("#city option").remove();
		}
		for(i=0; i < simpleNodes.length; i++ ){
			if(simpleNodes[i].pId == value){
				//效率过低
				//$("#city").append("<option value="+simpleNodes[i].id+">"+simpleNodes[i].name+"</option>");
				//$('<option/>',{
				//	value:simpleNodes[i].id,
				//	text:simpleNodes[i].name}).appendTo("#city");
				
				//JS
				var newoption = document.createElement("option");
				newoption.text  = simpleNodes[i].name;
				newoption.value = simpleNodes[i].id;
				form1.city.options.add(newoption);
			}
		}
	});

	$("#city").dblclick(function(){
		var value = $("#city option:selected").val();
		var text = $("#city option:selected").text();
		var flag = false;
		var len = $("#selcity option").length;
		//alert(len);
		if(len > 0){
		  $("#selcity option").each(function(i){
 			if(value == $(this).val()){
 			 	flag = true;
 			    alert("已选择,请勿重选!");
 			    return false;
 		   	 }
 		   });
 		   if(!flag){
 		   		//不删除原节点
 		   	 //$("#selcity").append("<option value="+ value +">"+ text +"</option>");
 		   	 $("#city option:selected").appendTo("#selcity");
 		   } 
 		 }else{
 		 	//不删除原节点
 		 	//$("#city option:selected").append("<option value="+ value +">"+ text +"</option>");
 		 	$("#city option:selected").appendTo("#selcity");
 		 }
	});
	
	$("#selcity").dblclick(function(){
		$("#selcity option:selected").remove();
		//还原
		//$("#selcity option:selected").appendTo("#city");
	});
	
});
</script>
</head>

<body onload="javascript:province();">
<center>
<div id="div2">
	<span><font color="blue"><strong>jQuery + JS 下拉框加载选择</strong></font></span>	
</div>
<div id="div1">
<form id="form1" name="form1">
	<select id="province" name="province">
		<option value="N" selected="selected">请选择</option>
	</select>
	&nbsp;&nbsp;
	<select size="10" class="font-color" id="city" name="city" style="width:150px"></select>
	<select multiple="multiple" class="font-color" id="selcity" name="selcity"></select>

</form>
<div>
</center>
</body>

</html>

   发表时间:2012-01-13  
楼主有效果图吗?
0 请登录后投票
   发表时间:2012-01-14  
yq5858588 写道
楼主有效果图吗?

不好意思由于是在上班无聊时, 自己练练,所以未截图, 你把代码贴到html文件,引入jQuery库,马上就可以看到效果了
0 请登录后投票
   发表时间:2012-01-16  
最近正在学JQery,学习了。。。
0 请登录后投票
   发表时间:2012-01-17   最后修改:2012-01-17
form1.city.options.add方法应该为 add(opt,undefined)
0 请登录后投票
   发表时间:2012-01-17  
求效果图,新手
0 请登录后投票
   发表时间:2012-01-20  
jQuery + JS 下拉框加载选择 在线效果
http://www.hy2999.com/show/jquery/showSelect.jsp
0 请登录后投票
   发表时间:2012-02-03  
在运行你的效果
0 请登录后投票
   发表时间:2012-02-08  
$("#city").dblclick(function() 这个方法是function内部的方法吗
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics