Deep Understanding selection box scripting [recommended]_javascript Tips

Front.

The selection box is created from the <select> and <option> elements, also known as a drop-down list box. To facilitate interaction with this control, JavaScript provides properties and methods in addition to the properties and methods common to all form fields. This article describes the marquee script in more detail

<select>

First, we introduce the related properties of <select> elements

Multiple

The Multiple property indicates whether multiple selections are allowed

<select name= "test" id= "Test" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id= "btn" > select </button>
< script>
Btn.onclick = function () {
 test.multiple =!test.multiple;
} 
</script>

Type

The Type property of the selection box has two types, one is ' Select-one ', the other is ' select-multiple ', which means multiple selections

<select name= "test" id= "Test" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id= "BTN" > If multiple </button>
<div IDs are selected = "Result" ></div>
<script>
btn.onclick = function () {
 test.multiple =!test.multiple;
 result.innerhtml = Test.type;
} 
</script>

Value

The Value property of the selection box is determined by the current selection

1. If there are no selected items, the Value property of the selection box holds the empty string

2. If there is a check, and the value attribute of the item is already specified in HTML, the Value property of the selection box equals the value attribute of the selected item. This rule is followed even if the value of the values attribute is an empty string

3, if there is a check, but the value attribute of the item is not specified in HTML, the Value property of the selection box equals the text of the item

4. If there is more than one check, the Value property of the selection box will take the first selected item according to the top two rules

Attention The ie8-browser only supports values for the Value property and does not support the selected text value

<select name= "test" id= "Test" >
 <option value= "a" >1</option>
 <option value= "B" >2 </option>
 <option>3</option>
</select>
<button id= "BTN1" > whether to select more </ button>
<button id= "BTN2" > Get value </button>
<div id= "result" ></div>
< script>
Btn1.onclick = function () {
 test.multiple =!test.multiple;
} 
Btn2.onclick = function () {
 result.innerhtml = test.value;
}
</script>

SelectedIndex

The SelectedIndex property returns the index of the selected item based on 0, and the value is-1 if there are no items selected. For controls that support multiple selections, only the index of the first item in the selected item is saved

<select name= "test" id= "Test" >
 <option value= "a" >1</option>
 <option value= "B" >2 </option>
 <option>3</option>
</select>
<button id= "BTN1" > whether to select more </ button>
<button id= "btn2" > Get index </button>
<div id= "result" ></div>
< script>
Btn1.onclick = function () {
 test.multiple =!test.multiple;
} 
Btn2.onclick = function () {
 result.innerhtml = Test.selectedindex;
}
</script>

Size

The Size property represents the number of visible rows in the selection box

<select name= "test" id= "Test" >
 <option value= "a" >1</option>
 <option value= "B" >2 </option>
 <option>3</option>
</select>
<button id= "BTN1" > Visible 1 lines </ button>
<button id= "btn2" > Visible 2 rows </button>
<button id= "Btn3" > Visible 3 lines </button>
<div id= "Result" ></div>
<script>
btn1.onclick = function () {
 test.size = 1;
} 
Btn2.onclick = function () {
 test.size = 2;
}
Btn3.onclick = function () {
 test.size = 3;
}
</script>

Options

The Options property represents all the <option> elements in the control

<select name= "test" id= "Test" >
 <option value= "a" >1</option>
 <option value= "B" >2 </option>
 <option>3</option>
</select>
<script>
//[option, option, option, selectedindex:0]
console.log (test.options)
</script>

<option>

In the DOM, each <option> element has a Htmloptionelement object representation. To facilitate access to data, the Htmloptionelement object also defines some properties

Attention IE browser does not support setting Display:none for <option> elements

Index

The Index property represents the indexes of the current option in the Options collection

Label

The Label property represents the tab for the current option

Attention ie9-Browser does not support

Selected

The selected property indicates whether the current option is selected. Set this property to True to select the current option

Text

The Text property represents the literal of an option

Value

The Value property represents the values of the option

[note] When the value attribute is not specified, IE8 returns an empty string; Other browsers return the value of the Text property

<select name= "test" id= "Test" >
 <option value= "a" selected>1</option> <option value=
 "B" >2</option>
 <option>3</option>
</select>
<script>
var option = Test.options[0];
Console.log (Option.index);//0
Console.log (option.label);//1,ie9-Browser returns an empty string '
console.log ( option.selected);//true
Console.log (option.text);//1 console.log
(option.value);//a
</script >

Add options

The "1" add option can use the DOM's appendchild () or InsertBefore () method

<select name= "test" id= "Test" >
 <option>1</option>
 <option>3</option>
</select>
<button id= "btn" > Add options 2</button>
<script>
Btn.onclick = function () {
 var newoption = document.createelement (' option ');
 newoption.innerhtml = 2;
 Test.insertbefore (Newoption,test.options[1]);
</script>

"2" You can use the Add () method of the selection box, add (newoption,reloption) method to insert a new <option> element in the control, before the related item (reloption)

Use the option constructor to create a new option that accepts two parameters: text and value (value), and the second argument is optional

<select name= "test" id= "Test" >
 <option>1</option>
 <option>3</option>
</select>
<button id= "btn" > Add options 2</button>
<script>
btn.onclick = function () {
 var newoption = new Option (' 2 ');
 Test.add (newoption,1);
}
</script>

Removal options

Like adding options, there are many ways to remove options

"1" Using the DOM RemoveChild () method

<select name= "test" id= "Test" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id= "btn" > Removal options 2</button>
<script>
Btn.onclick = function () {
 test.removechild (test.options[1]);
</script>

"2" uses the Remove () method of the selection box. This method takes an argument, which is the index of the option to remove

[note] The advantage of using this method is that if there is no index of the removed option, there is no error, just silent failure

<select name= "test" id= "Test" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id= "btn" > Removal option 2</button>
< script>
Btn.onclick = function () {
 test.remove (1);
}
</script>

"3" sets the appropriate option to NULL

[Note] This method also does not complain

<select name= "test" id= "Test" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id= "btn" > Removal options 2</button>
<script>
Btn.onclick = function () {
 test.options[1] = null;
}
</script>

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!