Operate the value selected by the <select> tag in JS
The <select> tag is a form control used to create a drop-down list. The <option> tag can be used inside the <select> tag to define the options available in the drop-down list. Here is an example of a basic dropdown list:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基本下拉列表a</title>
</head>
<body>
<select id="selectID" style="width:100px;height:30px">
<option>项1</option>
<option>项2</option>
<option>项3</option>
<option>项4</option>
</select>
</body>
</html>
Save the file name: simple drop-down list example a.html, open the effect with a browser:
JS manipulating options in dropdown list
The content under the <select> tag can obtain its object through JS operation, and obtain the index (index), value (value), and content (text) of the selected option
Get the select object:
var myselect=document.getElementById("selectID");
Among them, selectID identifies the value of the id attribute of the <select> tag
2. Get the index of the selected item:
var index =myselect.selectedIndex; //selectedIndex represents the index of your selected item
3. Get the value of the selected item option:
myselect.options[index].value;
In the previous sentence, options[index] can be removed and written as myselect.value
4. Get the text of the selected option:
myselect.options[index].text;
5. Get other values of the selected item, if any:
<select id="select">
<option value="A" url="http://www.baidu.com">第一个option</option>
<option value="B" url="http://www.qq.com">The second option</option>
</select>
The url you want to get:
myselect.options[index].getAttribute('url');
Tip : The above is a step-by-step writing method, now look at the comprehensive writing method
The comprehensive writing method for the above 3 is:
document.getElementById("selectID").value;
or
document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
The comprehensive writing method for the above 4 is:
document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].text
The following is an example source code for selecting an image display from the drop-down list :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<style>
div{
margin:20px;
text-align:center;
}
</style>
<script>
function show() {
document.getElementById("imgID").src = document.getElementById("selectID").value;
}
</script>
</head>
<body>
<div >
雪景
<select id="selectID" onchange="show()" style="width:100px;height:30px">
<option value="./雪1.png">雪1</option>
<option value="./雪2.png">雪2</option>
<option value="./雪3.png">雪3</option>
</select>
<br>
<img id="imgID" src="雪1.png" />
</div>
</body>
</html>
Save the file name: Select the picture from the drop-down list to display 1b.html, open the effect with a browser:
Use JS to add element information in the array to the drop-down list
First introduce the methods and properties used to add the element information of the array to the drop-down list
The method of select label object
add() Adds an option to the dropdown list.
语法：selectobject.add(option,before)
remove() removes an option from the dropdown list.
Syntax: selectobject. remove(index)
Properties of the Optiont tag object
defaultSelected returns the default value of the selected property.
index Returns the index position of an option in the dropdown list.
Selected Sets or returns the value of the selected property.
text Sets or returns the plain text value of an option.
JS adds the element information of the array to the drop-down list, the sample source code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<form name="form1" action="">
<select name="sel" style="width:100px;height:30px">
</select><br>
<input type="button" value="加载数组的数据项" onclick="addopt()">
</form>
<script>
var arr=new Array('项1','项2','项3','项4','项5')
var counts=arr.length;
function addopt(){
for(var i=0;i<counts;i++){
// document.form1.sel.options[i]=new Option (arr[i],i)
var opt=document.createElement('option')
opt.text=arr[i]
opt.value=i;
document.form1.sel.add(opt,undefined)
}
}
</script>
</body>
</html>
Save the file name: Add the data items of the array to the drop-down list.html, open the effect with a browser:
