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>來看一下運行效果
開始是這樣的
?
?添加數據
點擊添加
數據已經在里面了
再點擊移除
成功刪除bb
?
?再來看一下關燈開燈的效果
?
點擊關燈后
再點擊開燈
運行成功！
有興趣的也可以做做試試
?
轉載【http://www.cnblogs.com/qishuang/p/6261408.html】
轉載于:https://www.cnblogs.com/gw1016/p/6263113.html
總結
以上是生活随笔為你收集整理的Jquery操作下拉列表和复选框，自定义下拉的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 创建连接命令 ln -s 软
- 下一篇： HTML --- 盒模型