Jquery操做下拉列表和複選框，自定義下拉

時間 2019-12-08

原文原文鏈接

後半部分還有自定義下拉列表和開燈關燈的效果，能夠進來來看一下哦javascript

若是網頁有下拉列表和複選框，看一下Jquery怎麼來操做他們，主要怎麼來選取他們的數據，怎麼設置某一項選中php

先來看個下拉列表css

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

上面是一個很是簡單的下拉列表，加了一個按鈕，能夠選取他們的值，取值的話就得給下拉列表加valuehtml

運行後就是這樣的：java

而後須要用到Jquery，因此要先引入Jquery包jquery

而後就能夠寫js代碼了app

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

若是這個事件不是點擊事件，是關於按鍵的事件，如按鍵按下按鍵擡起，則這時候e就包含了按鍵的數據，可以取到能按了什麼鍵this

來看一下運行的結果spa

下拉列表選中哪一個，而後點擊取值，就會取到選中的那個值

再加一個賦值的按鈕

寫賦值的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>

來看一下運行效果

開始是這樣的

添加數據

點擊添加

數據已經在裏面了

再點擊移除

成功刪除bb

再來看一下關燈開燈的效果

點擊關燈後

再點擊開燈

運行成功！

有興趣的也能夠作作試試