Jquery操作下拉列表和復選框，自定義下拉 @ 互聯網

文章出處

后半部分還有自定義下拉列表和開燈關燈的效果，可以進來來看一下哦

如果網頁有下拉列表和復選框，看一下Jquery怎么來操作他們，主要怎么來選取他們的數據，怎么設置某一項選中

先來看個下拉列表

<body>
<select id="sel">
<option value="張店">張店</option>
<option value="淄川">淄川</option>
<option value="博山">博山</option>
<option value="桓臺">桓臺</option>
</select>
<input type="button" value="取值" id="qu" />
</body>

上面是一個非常簡單的下拉列表，加了一個按鈕，可以選取他們的值，取值的話就得給下拉列表加value

運行后就是這樣的：

然后需要用到Jquery，所以要先引入Jquery包

然后就可以寫js代碼了

對括號里面的e，有解釋，來看一下e.都包括哪些數據

如果這個事件不是點擊事件，是關于按鍵的事件，如按鍵按下按鍵抬起，則這時候e就包含了按鍵的數據，能夠取到能按了什么鍵

來看一下運行的結果

下拉列表選中哪個，然后點擊取值，就會取到選中的那個值

再加一個賦值的按鈕

寫賦值的js代碼部分

賦值和取值都需要val方法就可以完成

來看一下運行結果

比如說，本來是這個狀態：

然后點擊一下賦值

就會變成代碼內val值對應的地址

下面再來看個復選框列表

看一下js代碼部分

運行后的結果：

如果三個都選中，那么會彈出三個窗口，先是張店，點擊確定然后淄川，再點確定隨后周村

有取值了，可以再給它設個賦值試試

js代碼部分

看一下能不能運行成功

點擊賦值后，就選中了值為周村的復選框，運行成功

這樣有點麻煩，還有簡單的做法

只需要三句，看一下能不能運行成功

點擊賦值，可以選中，運行成功

下面做一個，自定義的下拉列表，外加一個開燈關燈效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="../xinphp/jquery-1.11.2.min.js"></script>
<style type="text/css">
#zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5;}
</style>
</head>

<body>

<select id="sel">
    
</select>

<input type="text" id="shuru" />
<input type="button" value="添加" id="btn" />
<input type="button" value="移除" id="yichu" />

<div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
<input type="button" value="關燈" id="guan" />
<input type="button" value="開燈" id="kai" />
</div>





</body>
<script type="text/javascript">

$("#btn").click(function(){
    var v = $("#shuru").val();
    //var str = "<option value='"+v+"'>"+v+"</option>";
    
    //造元素
    var op = document.createElement("option");
    op.setAttribute("value",v);
    op.innerHTML = v;
    
    $("#sel").append(op); //追加
    
})

$("#yichu").click(function(){
        var v = $("#shuru").val(); 
        
        $("[value='"+v+"']").remove(); //移除
    })
    
$("#guan").click(function(){
        var str = "<div id='zz'></div>";
        $("body").append(str);
        $(this).css("display","none");
        $("#kai").css("display","block");
    })
$("#kai").click(function(){
        $("#zz").remove();
        $("#guan").css("display","block");
        $(this).css("display","none");
    })

</script>
</html>