jQuery 下拉列表选择加载 (练手实例)

最新推荐文章于 2023-09-08 19:04:21 发布

原创最新推荐文章于 2023-09-08 19:04:21 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #ViewUI

本文介绍了一个使用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("<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>