jQuery + JS 上拉框加载选择 (练练而已)
日期：2014-05-16 浏览次数：20373 次
jQuery + JS 下拉框加载选择 (练练而已)
<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="lib/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("<opt
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
