jQuery實(shí)現(xiàn)下拉框左右選擇的簡單實(shí)例

更新時(shí)間：2014年02月22日 09:13:41 作者：

本篇文章主要是對jQuery實(shí)現(xiàn)下拉框左右選擇的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

就是實(shí)現(xiàn)這個(gè)效果的，選中添加到右邊，全部添加到右邊，選中刪除到左邊，全部刪除到左邊。

html部分：

復(fù)制代碼代碼如下:

<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1">選項(xiàng)1</option>
            <option value="2">選項(xiàng)2</option>
            <option value="3">選項(xiàng)3</option>
            <option value="4">選項(xiàng)4</option>
            <option value="5">選項(xiàng)5</option>
            <option value="6">選項(xiàng)6</option>
            <option value="7">選項(xiàng)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">選項(xiàng)8</option>
        </select>
        <div>
            <span id="remove"><<選中刪除到左邊</span>
            <span id="remove_all"><<全部刪除到左邊</span>
        </div>
    </div>
</body>

這里要注意的是select的multiple屬性，只有添加了之后，才會(huì)在select框中出現(xiàn)多個(gè)select選項(xiàng)。
否則只會(huì)顯示出一條。

jQuery代碼解析：

復(fù)制代碼代碼如下:

<script type="text/javascript">
$(function(){
    //移到右邊
    $('#add').click(function() {
    //獲取選中的選項(xiàng)，刪除并追加給對方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左邊
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右邊
    $('#add_all').click(function() {
        //獲取全部的選項(xiàng),刪除并追加給對方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左邊
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //雙擊選項(xiàng)
    $('#select1').dblclick(function(){ //綁定雙擊事件
        //獲取全部的選項(xiàng),刪除并追加給對方
        $("option:selected",this).appendTo('#select2'); //追加給對方
    });
    //雙擊選項(xiàng)
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
</script>

這里要注意的是$("option:selected",this)。這個(gè)看起來有點(diǎn)奇怪。其實(shí)$()有2個(gè)參數(shù)，一個(gè)是選擇器，一個(gè)是作用域。要和$("xxxx,xxx")區(qū)分。通常意義下的$('xxxx')其實(shí)是默認(rèn)了第二個(gè)作用域。完整說應(yīng)該是$('xxxx',document)。這里加上this之后，作用域就限制在#select1中或#select2中了。也就是select1中的選中項(xiàng)被添加到#select2的后面。

效果類似于$("#select1 option:selected")。

如果不加上，this這個(gè)參數(shù)的話，就會(huì)牽扯到全局中的選中項(xiàng)。就會(huì)出錯(cuò)。

注意點(diǎn)2：

append()與appendTo()方法的區(qū)別。

append(content|fn)向每個(gè)匹配的元素內(nèi)部追加內(nèi)容。

appendTo(content)把所有匹配的元素追加到另一個(gè)指定的元素元素集合中。

前者是向匹配的元素中添加內(nèi)容的，后者是把匹配的素有元素追加到另一個(gè)指定的元素集合中的。

比如$("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>

您可能感興趣的文章: