Common Code Collation for select and option operations in js _ basic knowledge

When using js, you will inevitably encounter the select and option operations. I also feel the same way, so I collected some common and useful code for you to share. 1. Obtain the selected select value and text. The html code is as follows::

The Code is as follows:

One Two Three

You can use the following script code s to obtain the selected value and text

The Code is as follows:

$ ("# MySelect"). val (); // obtain the value of the selected record
$ ("# MySelect option: selected"). text (); // obtain the text value of the selected record

2. Use the new Option ("text", "value") method to add option

The Code is as follows:

Var obj = document. getElementById ("mySelect"); obj. add (new Option ("4", "4 "));

3. Delete All option options

The Code is as follows:

Var obj = document. getElementById ("mySelect"); obj. options. length = 0;

4. delete option

The Code is as follows:

Var obj = document. getElementById ("mySelect"); var index = obj. selectedIndex; obj. options. remove (index );

5. Modify the option

The Code is as follows:

Var obj = document. getElementById ("mySelect ");
Var index = obj. selectedIndex;
Obj. options [index] = new Option ("three", 3); // change the corresponding value
Obj. options [index]. selected = true; // keep selected

6. Delete select

The Code is as follows:

Var obj = document. getElementById ("mySelect ");
Obj. parentNode. removeChild (obj); // remove the current object

7. select selected RESPONSE event

The Code is as follows:

$ ("# MySelect"). change (function () {// Add the operation code to be executed })

1. dynamically create select

The Code is as follows:

Function createSelect (){
Var mySelect = document. createElement_x ("select ");
MySelect. id = "mySelect ";
Document. body. appendChild (mySelect );
}

2. Add option

The Code is as follows:

Function addOption (){
// Search for objects by id,
Var obj = document. getElementByIdx_x ('myselect ');
// Add an option
Obj. add (new Option ("text", "value"); // This can only be valid in IE
Obj. options. add (new Option ("text", "value"); // compatible with IE and firefox
}

3. Delete All option options

The Code is as follows:

Function removeAll (){
Var obj = document. getElementByIdx_x ('myselect ');
Obj. options. length = 0;
}

4. delete an option

The Code is as follows:

Function removeOne (){
Var obj = document. getElementByIdx_x ('myselect ');
// Index. The sequence number of the option to be deleted. The sequence number of the selected option is used here.
Var index = obj. selectedIndex;
Obj. options. remove (index );
}

5. Obtain the option value.

The Code is as follows:

Var obj = document. getElementByIdx_x ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index]. value;

6. Obtain the option text

The Code is as follows:

Var obj = document. getElementByIdx_x ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index]. text;

7. Modify option

The Code is as follows:

Var obj = document. getElementByIdx_x ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index] = new Option ("new text", "new Value ");

8. Delete select

The Code is as follows:

Function removeSelect (){
Var mySelect = document. getElementByIdx_x ("mySelect ");
MySelect. parentNode. removeChild (mySelect );
}

The complete code for the entire instance is as follows::

The Code is as follows:

I debugged a piece of js code today and it runs well on ie. I encountered an error in debugging on Firefox.

The Code is as follows:

Obj. add (new Option ("text", "value"); // This can only be valid in IE
Obj. options. add (new Option ("text", "value"); // compatible with IE and firefox

Because of this code, I collected this article on the Internet to search for information.
Sharing!