js 控制选择框

通过javascript控制选择框，实现添加/删除 选项，获得选中项信息，以及两个选择框之间的选项移动

html

<form>
    <select multiple>
         <option value="wudi zz">wudi</option>
         <option>banyu</option>
         <option value="yichen 66">yichen</option>
         <option value="">闪亮</option>
     </select>
     <select multiple>
         <option value="猴子">monkey</option>
         <option value="大象">elephant</option>
         <option value="狗">dog</option>
     </select>
     <button id="getselect" type="button">getselectItem</button>
     <button id="add" type="button">add</button>
     <button id='remove' type="button" >remove</button>
     <button id="move" type="button">move</button>
 </form>

获得选中的选项

document.getElementById("getselect").addEventListener("click",()=>{
            var select =document.forms[0][0];
            for(var i=0;i<select.options.length;i++){
                if(select.options[i].selected)
                    console.log(select.options[i].text)
            }
        })

这里document.forms[0][0]，是指页面中的第一个表单（form）,表单中的第一个第一个字段，也可以使用document.forms[0].elements[0]。之后则遍历该对象（选择框）中的每一个选项(options),如果已选中，则打印到控制台，也可以把它存到一个数组中。

新增选项

document.getElementById("add").addEventListener("click",()=>{
            // dom生成并添加
            var newoption=document.createElement("option");
            newoption.appendChild(document.createTextNode("dom created"))
            newoption.setAttribute("value","dom create value")
            document.forms[0][0].appendChild(newoption) 

            // var option=new Option("option text","option value");// Option构造函数生成
            // document.forms[0][0].add(option,undefined);// undefined  指定添加到最后面
            // document.forms[0][0].add(option,document.forms[0][0].options[2])// 指定元素前面
        })

这里有两种方法，一种是通过dom生成，然后通过appendChild()添加。还有一种方法是通过Option构造函数生成，以add(）方法添加。add()方法的第二个参数是确定位置，在该元素之前，如果想要插入到最后，将它设为underfined即可。

删除

document.getElementById("remove").addEventListener("click",function(){
            // 三种方法可以实现
            var select=document.forms[0][0];
            // select.removeChild(select.options[0]);
            // select.remove(1);
            select.options[2]=null;
        })

有三种方法进行删除：

• 通过dom的removeChild()方法删除目标
• 通过remove()方法 参数为在选择框中的位置，从0开始
• 通过将对应位置的options置为null，这是浏览器遗留机制。

移动

document.getElementById("move").addEventListener("click",function(){
            var target=document.forms[0][1];
            var select =document.forms[0][0];
            var item=[];
            for(var i=0;i<select.options.length;i++){
                if(select.options[i].selected)
                    item.push(select.options[i]);
            }
            // 实现选中的移动
            for(var i=0;i<item.length;i++)
                target.appendChild(item[i])
            // 通过insertbefore调整位置
            var end=target.options[target.options.length-1]
            target.insertBefore(end,target.options[0])
        })

将第一个选择框中选中的选项移动到第二个选择框中，首先要获得第一个选择框中选择的那些项，存入到item中，然后依次遍历，将这些项追加到第二个选择框中，如果想要调整位置，可以通过insertBefore()方法实现。