.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- 拉動懸浮于頂部的JS控制代碼
- 在JavaScript中構(gòu)建ArrayList示例代碼
- js使用for循環(huán)及if語句判斷多個一樣的name
- JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
- jQuery CSS()方法改變現(xiàn)有的CSS樣式表
- JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
- jQuery動畫高級用法（上）——詳解animation中的.queue()函數(shù)
- python小技巧之批量抓取美女圖片
- JS中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹
- JS獲取瀏覽器窗口大小 獲取屏幕，瀏覽器，網(wǎng)頁高度寬度
jQuery實現(xiàn)下拉框左右選擇的簡單實例
本篇文章主要是對jQuery實現(xiàn)下拉框左右選擇的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
就是實現(xiàn)這個效果的，選中添加到右邊，全部添加到右邊，選中刪除到左邊，全部刪除到左邊。
html部分：
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
<option value="4">選項4</option>
<option value="5">選項5</option>
<option value="6">選項6</option>
<option value="7">選項7</option>
</select>
<div>
<span id="add" >選中添加到右邊>></span>
<span id="add_all" >全部添加到右邊>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">選項8</option>
</select>
<div>
<span id="remove"><<選中刪除到左邊</span>
<span id="remove_all"><<全部刪除到左邊</span>
</div>
</div>
</body>
這里要注意的是select的multiple屬性，只有添加了之后，才會在select框中出現(xiàn)多個select選項。
否則只會顯示出一條。
jQuery代碼解析：
<script type="text/javascript">
$(function(){
//移到右邊
$('#add').click(function() {
//獲取選中的選項，刪除并追加給對方
$('#select1 option:selected').appendTo('#select2');
});
//移到左邊
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右邊
$('#add_all').click(function() {
//獲取全部的選項,刪除并追加給對方
$('#select1 option').appendTo('#select2');
});
//全部移到左邊
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//雙擊選項
$('#select1').dblclick(function(){ //綁定雙擊事件
//獲取全部的選項,刪除并追加給對方
$("option:selected",this).appendTo('#select2'); //追加給對方
});
//雙擊選項
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
這里要注意的是$("option:selected",this)。這個看起來有點奇怪。其實$()有2個參數(shù)，一個是選擇器，一個是作用域。 要和$("xxxx,xxx")區(qū)分。通常意義下的$('xxxx')其實是默認了第二個作用域。完整說應(yīng)該是$('xxxx',document)。這里加上this之后，作用域就限制在#select1中或#select2中了。也就是select1中的選中項被添加到#select2的后面。
效果類似于$("#select1 option:selected")。
如果不加上，this這個參數(shù)的話，就會牽扯到全局中的選中項。就會出錯。
注意點2：
append()與appendTo()方法的區(qū)別。
append(content|fn)向每個匹配的元素內(nèi)部追加內(nèi)容。
appendTo(content)把所有匹配的元素追加到另一個指定的元素元素集合中。
前者是向匹配的元素中添加內(nèi)容的，后者是把匹配的素有元素追加到另一個指定的元素集合中的。
比如$("p").append("<b>Hello</b>");是向p元素中追加內(nèi)容<b>Hello</b>。
原來的p元素內(nèi)容：<p>I would like to say: </p>現(xiàn)在的p元素內(nèi)容：[ <p>I would like to say: <b>Hello</b></p> ]$("p").appendTo("div");將p元素追加到div元素中。原來的內(nèi)容：<p>I would like to say: </p>
<div></div><div></div>結(jié)果：<div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div>