JavaScript实现两个listbox的option数据转移

Html：

<div><span>所选时间:</span><select id="xuanyongTimelb" style="width: 200px; height: 130px;" multiple="multiple"></select></div>
                        <div class="label"><span id="righttimeid">---></span><span id="lefttimeid"><---</span></div>
                        <div>
                            <span>可用时间:</span><select id="keyongTimelb" style="width: 200px; height: 130px;" multiple="multiple">
                                @*       <option>0:00</option>*@
                                <option tag="1">0:30</option>
                                <option tag="2">1:00</option>
                                <option tag="3">1:30</option>
                                <option tag="4">2:00</option>
                                <option tag="5">2:30</option>
                                <option tag="6">3:00</option>
                                <option tag="7">3:30</option>
                                <option tag="8">4:00</option>
                                <option tag="9">4:30</option>
                                <option tag="10">5:00</option>
                                <option tag="11">5:30</option>
                                <option tag="12">6:00</option>
                                <option tag="13">6:30</option>
                                <option tag="14">7:00</option>
                                <option tag="15">7:30</option>
                                <option tag="16">8:00</option>
                                <option tag="17">8:30</option>
                                <option tag="18">9:00</option>
                                <option tag="19">9:30</option>
                                <option tag="20">10:00</option>
                                <option tag="21">10:30</option>
                                <option tag="22">11:00</option>
                                <option tag="23">11:30</option>
                                <option tag="24">12:00</option>
                                <option tag="25">12:30</option>
                                <option tag="26">13:00</option>
                                <option tag="27">13:30</option>
                                <option tag="28">14:00</option>
                                <option tag="29">14:30</option>
                                <option tag="30">15:00</option>
                                <option tag="31">15:30</option>
                                <option tag="32">16:00</option>
                                <option tag="33">16:30</option>
                                <option tag="34">17:00</option>
                                <option tag="35">17:30</option>
                                <option tag="36">18:00</option>
                                <option tag="37">18:30</option>
                                <option tag="38">19:00</option>
                                <option tag="39">19:30</option>
                                <option tag="40">20:00</option>
                                <option tag="41">20:30</option>
                                <option tag="42">21:00</option>
                                <option tag="43">21:30</option>
                                <option tag="44">22:00</option>
                                <option tag="45">22:30</option>
                                <option tag="46">23:00</option>
                                <option tag="47">23:30</option>
                                <option tag="48">24:00</option>
                            </select>
                        </div>

 

我 在option自定了“tag”属性，目的，是实现option在两个listbox之间转移之后，要将两边都要进行“排序”（这点很重要，希望大家注意下，往往有些option的顺序是很有意义的），

也许大家会问我，问什么不直接在option的value上赋值？

回答是：（视情况而定），因为，option的text往往不能代表我们要获取的值，而我们有时必须要借助value或者自定的属性的值，这里，我就写了最通用的方法，这样，无论什么时候，都不妨碍，我的option的val定义什么要的值（当然，用不用value，听你的，程序员本来就是艺术家）；

　　下面就讲解下js的部分，我先贴出代码：

 //备份时间  排序
        //向右
        function TimeListBoxRight() {
            var leftlb = document.getElementById("xuanyongTimelb");
            var rightlb = document.getElementById("keyongTimelb");

            var arrtext = new Array();
            var arrvalue = new Array();
            var arrtag = new Array();
            var arrindex = new Array();

            var j = 0;
            for (var i = 0; i < leftlb.options.length; i++) {
                if (leftlb.options[i].selected == true) {
                    //leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
                    //rightlb.options.remove(i);
                    arrtext[j] = leftlb.options[i].text;
                    arrvalue[j] = leftlb.options[i].value;
                    arrtag[j] = leftlb.options[i].getAttribute("tag");
                    arrindex[j] = i;
                    j++;
                }
            }

            //添加
            for (var k = 0; k < arrvalue.length; k++) {
                var opt = new Option();
                opt.value = arrvalue[k];
                opt.text = arrtext[k];
                opt.setAttribute("tag", arrtag[k]);
                rightlb.options[rightlb.options.length] = opt;
            }

            //冒泡排序
            for (var m = 0; m < rightlb.options.length - 1; m++) {
                for (var l = 0; l < rightlb.options.length - 1 - m; l++) {
                    if (Number(rightlb.options[l].getAttribute("tag")) > Number(rightlb.options[l + 1].getAttribute("tag"))) {

                        var temp = new Option();
                        temp.value = rightlb.options[l].value;
                        temp.text = rightlb.options[l].text;
                        temp.setAttribute("tag", rightlb.options[l].getAttribute("tag"));

                        rightlb.options[l].value = rightlb.options[l + 1].value;
                        rightlb.options[l].text = rightlb.options[l + 1].text;
                        rightlb.options[l].setAttribute("tag", rightlb.options[l + 1].getAttribute("tag"));

                        rightlb.options[l + 1].value = temp.value;
                        rightlb.options[l + 1].text = temp.text;
                        rightlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag"));

                    }
                }
            }

            //删除
            for (var n = arrindex.length - 1; n >= 0; n--) {
                leftlb.options.remove(arrindex[n]);
            }

            if (leftlb.options.length <= 0) {
                $("#righttimeid").disable = true;
            }

        }

        //Item 向左
        function TimeListBoxLeft() {
            var leftlb = document.getElementById("xuanyongTimelb");
            var rightlb = document.getElementById("keyongTimelb");

            var arrtext = new Array();
            var arrvalue = new Array();
            var arrtag = new Array();
            var arrindex = new Array();

            var j = 0;
            for (var i = 0; i < rightlb.options.length; i++) {
                if (rightlb.options[i].selected == true) {
                    //leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
                    //rightlb.options.remove(i);
                    arrtext[j] = rightlb.options[i].text;
                    arrvalue[j] = rightlb.options[i].value;
                    arrtag[j] = rightlb.options[i].getAttribute("tag");
                    arrindex[j] = i;
                    j++;
                }
            }

            //添加
            for (var k = 0; k < arrvalue.length; k++) {
                var opt = new Option();
                opt.value = arrvalue[k];
                opt.text = arrtext[k];
                opt.setAttribute("tag", arrtag[k]);
                leftlb.options[leftlb.options.length] = opt;
            }

            //冒泡排序
            for (var m = 0; m < leftlb.options.length - 1; m++) {
                for (var l = 0; l < leftlb.options.length - 1 - m; l++) {
                    if (Number(leftlb.options[l].getAttribute("tag")) > Number(leftlb.options[l + 1].getAttribute("tag"))) {

                        var temp = new Option();
                        temp.value = leftlb.options[l].value;
                        temp.text = leftlb.options[l].text;
                        temp.setAttribute("tag", leftlb.options[l].getAttribute("tag"));

                        leftlb.options[l].value = leftlb.options[l + 1].value;
                        leftlb.options[l].text = leftlb.options[l + 1].text;
                        leftlb.options[l].setAttribute("tag", leftlb.options[l + 1].getAttribute("tag"));

                        leftlb.options[l + 1].value = temp.value;
                        leftlb.options[l + 1].text = temp.text;
                        leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag"));

                    }
                }
            }

            //删除
            for (var n = arrindex.length - 1; n >= 0; n--) {
                rightlb.options.remove(arrindex[n]);
            }

            if (rightlb.options.length <= 0) {
                $("#lefttimeid").disable = true;
            }

        }

　　上面的代码也已经很详细了。

　　注意点（或许能对你有些用处）：

　　1.在option上自定的属性（“tag”）后，你需要明白，如果通过js 得到 “tag”，或者设置“tag”的值，

leftlb.options[i].getAttribute("tag"); //获取tag的值

leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag"));  //设置“tag”的值

　　2.html的 Select里面的option 在javascript中如何定义：　　

var opt = new Option();
//在给“tag”赋值的时候，切记，不要学text，value那样干，（或许 . 你用来会很顺手）；

　　3.当我们在转移之后，我们又重新排序，这里，你想用什么方法排就用什么方法排（算法的灵活运用）。当然，还是要注意：tag的赋值;

//下面的方法，我努力尝试，不过，不管用；
var temp = leftlb.options[l];
leftlb.options[l] = leftlb.options[l+1];
leftlb.options[l+1] = temp;

JavaScript控制两个列表框listbox左右交换数据的方法

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下：

这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动

function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
    for(var count=0; count < src.options.length; count++) {
        if(src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
listbox_moveacross('countryList', 'selectedCountryList');

下面是像是的演示效果代码，可以直接在浏览器内执行

Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
    <td>
<select id="sourceSelect" size="10" multiple="">
 <option value="a">Afghanistan</option>
 <option value="b">Bahamas</option>
 <option value="c">Barbados</option>
 <option value="d">Belgium</option>
 <option value="e">Bhutan</option>
 <option value="f">China</option>
 <option value="g">Croatia</option>
 <option value="h">Denmark</option>
 <option value="i">France</option>
</select>
    </td>
    <td>
        <button onclick="listboxMoveacross('sourceSelect', 'destSelect');">>></button>  <br>
        <button onclick="listboxMoveacross('destSelect', 'sourceSelect');"><<</button>
    </td>
    <td>
<select id="destSelect" size="10" multiple="">
 <option value="a">Afghanistan</option>
 <option value="b">Bahamas</option>
 <option value="c">Barbados</option>
 <option value="d">Belgium</option>
 <option value="e">Bhutan</option>
 <option value="f">China</option>
 <option value="g">Croatia</option>
 <option value="h">Denmark</option>
 <option value="i">France</option>
</select>
    </td>
</tr>
</tbody></table>
    <script>
function listboxMoveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
    for(var count=0; count < src.options.length; count++) {
        if(src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
</script>

时间： 2024-08-04 10:42:46

JavaScript实现两个listbox的option数据转移的相关文章

c# listbox 转移-C# listbox控件 两个listbox间item的转移

问题描述 C# listbox控件 两个listbox间item的转移 第一段代码: protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < selected.Items.Count; i++) { if (selected.Items[i].Selected) { select.Items.Add(selected.SelectedItem); selected.Items.Remove(se

使用javascript实现两个listbox中list的移动

javascript 效果图片: 说明:1.ListBox为服务器端控件,list可以在服务器端初始化2.Button可以为服务器端,也可以为客户端控件:    如果为服务器端控件,需要在页面初始化的时候为其添加事件处理为:    btn_updaddrel.Attributes.Add("OnClick","javascript:add();");     如果为客户端控件,则在声明控件的时候指定事件处理: <INPUT type="button&

JavaScript控制两个列表框listbox左右交换数据的方法

 这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 代码如下: function listbox_moveacross(sour

JavaScript控制两个列表框listbox左右交换数据的方法_javascript技巧

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) {     var src = document.getElementById(sourceID);     var dest = document.getEl

两个listbox实现选项的添加删除和搜索_javascript技巧

两个listbox实现选项的添加,删除和搜索 贴一下主要的js代码,一些资源我就不传了.下面是效果图. group.js 复制代码 代码如下: function addMember() { //右侧选中的项添加到左侧 var add=$("#newAddMembersId").val(); var del=$("#deleteMembersId").val(); var ext=$("#existedMemberId").val(); var n

用Javascript 实现的Dual listbox

javascript 这是我用 javascript 制作的"Dual listbox"(双向选择器)的一个应用示例,是从我的代码中抠出来的.在网页编程中经常会用到.    也许我的实现太烦琐了,希望大家有更好的代码贡献出来.   <html>  <head>  <title>选择器</title>  <link href="./style/style.css" rel="stylesheet"

用 Javascript 实现的“Dual listbox”(双向选择器)

javascript  这是我用 Javascript 制作的"Dual listbox"(双向选择器)的一个应用示例,是从我的代码中抠出来的.在网页编程中经常会用到.     也许我的实现太烦琐了,希望大家有更好的代码贡献出来. <html><head>  <title>选择器</title>  <link href="./style/style.css" rel="stylesheet"

JavaScript比较两个对象是否相等的方法_javascript技巧

本文实例讲述了JavaScript比较两个对象是否相等的方法.分享给大家供大家参考.具体如下: 在Python中可以通过cmp()内建函数来比较两个对象所包涵的数据是否相等(数组.序列.字典).但是在javascript语言中并没有相关的实现.本js代码通过对js对象进行各方面的比较来判断两个对象是否相等 cmp = function( x, y ) { // If both x and y are null or undefined and exactly the same if ( x ==

JavaScript合并两个数组并去除重复项的方法_javascript技巧

本文实例讲述了JavaScript合并两个数组并去除重复项的方法.分享给大家供大家参考.具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i for(var j=i+1; j if(a[i] === a[j]) a.splice(j, 1); } } return a; }; //Demo var array1 = ["a","b"]; var ar