小柒

www.xiaoqi.cn

0%

选择框编程

发表于 更新于 分类于

选项处理

使用选择框的selectedIndex属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <form method="post">
        <select name="location" id="selLocation">
            <option value="Sunnyvalue,CA">Sunnyvalue</option>
            <option value="Los Angeles,CA">Los Angeles</option>
            <option value="Mountain View,CA">Mountain View</option>
            <option value="">China</option>
            <option >Australia</option>
        </select>

     </form>
     
     <script src="example3.js"></script>
    
let selectbox=document.forms[0].elements["location"];
function getSelectedOptions(selectbox){
    let result=new Array();
    for(let option of selectbox.options){
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
let selectedOptions=getSelectedOptions(selectbox);
let message="";
for(let option of selectedOptions){
    message+=`Selected index:${option.index}\n`+`Selected text:${option.text}\n`+`Selected value:${option.value}\n`;

}
console.log(message);

添加选项

动态创建选项

1
2
3
4
let newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

使用Option构造函数创建选项,接收两个参数：text和value，用选择框的add方法添加选项

1
2
let newOption=new Option("Option text","Option value");
selectbox.add(newOption,undefined);//在列表末尾添加选项

移除选项

1
2
3
4
5
6
7
8
9
selectbox.removeChild(selectbox.options[0]);//移除第一项
selectbox.remove(0);//移除第一项
selectbox.options[0]=null;
//清除选项框的所有选项
function clearSelectbox(selectbox){
    for(let option of selectbox.options){
        selectbox.remove(0);
	}
}

移动和重排选项

1
2
3
4
let selectbox1=document.getElementById("selLocations1");
let selectbox2=document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);//将选项从第一个选择框移动到另一个选择框

重排选项

1
2
3
4
5
6
let selectbox1=document.getElementById("selLocations1");
let optionToMove=selectbox1.options[1];
selectbox1.insertBefore(optionToMove,selectbox1.options[optionToMove.index-1]);//将要重排的选项移动到它原先位置的前前面
let selectbox1=document.getElementById("selLocations1");
let optionToMove=selectbox1.options[1];
selectbox1.insertBefore(optionToMove,selectbox1.options[optionToMove.index+2]);//将要重排的选项移动到它原先位置的后面一位