浏览 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> <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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-01-13
楼主有效果图吗?
|
|
返回顶楼 | |
发表时间:2012-01-14
yq5858588 写道 楼主有效果图吗?
不好意思由于是在上班无聊时, 自己练练,所以未截图, 你把代码贴到html文件,引入jQuery库,马上就可以看到效果了 |
|
返回顶楼 | |
发表时间:2012-01-16
最近正在学JQery,学习了。。。
|
|
返回顶楼 | |
发表时间:2012-01-17
最后修改:2012-01-17
form1.city.options.add方法应该为 add(opt,undefined)
|
|
返回顶楼 | |
发表时间:2012-01-17
求效果图,新手
|
|
返回顶楼 | |
发表时间:2012-01-20
jQuery + JS 下拉框加载选择 在线效果
http://www.hy2999.com/show/jquery/showSelect.jsp |
|
返回顶楼 | |
发表时间:2012-02-03
在运行你的效果
|
|
返回顶楼 | |
发表时间:2012-02-08
$("#city").dblclick(function() 这个方法是function内部的方法吗
|
|
返回顶楼 | |