zoukankan      html  css  js  c++  java
  • Web页面中两个listbox的option的转移

      

    Html:

    <div><span>所选时间:</span><select id="xuanyongTimelb" style=" 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=" 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;
  • 相关阅读:
    什么是ORM
    ORM优缺点
    Azure 中快速搭建 FTPS 服务
    连接到 Azure 上的 SQL Server 虚拟机(经典部署)
    在 Azure 虚拟机中配置 Always On 可用性组(经典)
    SQL Server 2014 虚拟机的自动备份 (Resource Manager)
    Azure 虚拟机上的 SQL Server 常见问题
    排查在 Azure 中新建 Windows 虚拟机时遇到的经典部署问题
    上传通用化 VHD 并使用它在 Azure 中创建新 VM
    排查在 Azure 中新建 Windows VM 时遇到的部署问题
  • 原文地址:https://www.cnblogs.com/zychengzhiit1/p/4520919.html
Copyright © 2011-2022 走看看