当前位置:jQuery学习 > jQuery > jQuery移动listbox的值

jQuery移动listbox的值

时间:2010-09-02QQ群:116983258

jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法。

先看看简单的html,因为服务器控件会自动转换为html标签,所以在例子中,我并没有用服务器控件。如下:

<asp:ListBox></asp:ListBox>

会自动转换成:<select></select>

html代码如下:

<div style="width:240px;">
    <div style="width:100px;float:left;">
        <select size="4" name="listLeft" id="listLeft" class="normal"> 
        </select> 
        </div>
        <div style="width:40px;float:left; padding-top:20px;">
        <input type="button" id="btnRight" value=">>" /><br />
        <input type="button" id="btnLeft" value="<<" />
        </div>
        <div style="width:100px;float:left;">
        <select size="4" name="listRight" id="listRight" class="normal"> 
        </select>
    </div>
</div>

json数据结构如下:

//data
var vData = { "datalist":
            [
                { "data": "jQuery", "text": "jQuery" },
                { "data": "Asp.net", "text": "Asp.net" },
                { "data": "internet", "text": "internet" },
                { "data": "Sql", "text": "Sql" }
            ]
};

下边就是jQuery实现代码,其中关键地方做了注释。

//bind data
var vlist = "";
//遍历json数据
jQuery.each(vData.datalist, function(i, n) {
    vlist += "<option value=" + n.data + ">" + n.text + "</option>";
});
//绑定数据到listLeft
$("#listLeft").append(vlist);

//left move
$("#btnRight").click(function() {
    //数据option选中的数据集合赋值给变量vSelect
    var vSelect = $("#listLeft option:selected");
    //克隆数据添加到listRight中
    vSelect.clone().appendTo("#listRight");
    //同时移除listRight中的option
    vSelect.remove();
});
//right move 
$("#btnLeft").click(function() {
    var vSelect = $("#listRight option:selected");
    vSelect.clone().appendTo("#listLeft");
    vSelect.remove();
});
作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/use-jquery-to-move-value-in-listbox.html

所有话题