Js/jquery operation Select drop-down box

Source: Internet
Author: User

One, JS operation select drop-down box

var selobj = drop-down box object

1. Remove all items:
selObj.options.length = 0;

2. Remove one of the drop-down boxes:
SelObj.options.remove (index);

"Index" is the index value of the dropdown box option, and if the 0 index entry is moved out (top-down), then the index of the 1 index entry becomes 0, and the subsequent index advances sequentially

You can also use loops to remove all items:

var length = Selobj.options.length;for (var i=length-1;i>=0;i--) {    selObj.options.remove (i);}

3. Remove the selected item from the drop-down box:
Selobj.options[selobj.selectedindex] = null;

"SelectedIndex" for the drop-down box to check the index value of the item, "Options[index" is also the option to get the drop-down box index value =index

4. Add drop-down box options:
SelObj.options.add (New Option (text, value));

"Text" is the display text for the drop-down box option, "Value" is the value of the drop-down box option, which is added at the end of the drop-down box with the highest index value

5. Modify the drop-down box to select the item:
Selobj.options[selobj.selectedindex] = new Option (text, value);

6. Get the value of the drop-down box selected item:
Selobj.options[selobj.selectedindex].value

7. Whether the drop-down box is selected:
selobj.selectedindex >-1? //checked ://Not selected

Second, jQuery operation select drop-down box

var selid = drop-down box object ID

1. Get the Specify drop-down box option:
$ ("#selId"). Find ("option:selected");

"Option:selected" is checked, "Option:first" is the first item (index value is 0), "Option:last" is the last item (maximum index value)

$ ("#selId option[value= ' xxx ']");

Gets the option for the drop-down box option value "XXX"

$ ("#selId option[text= ' xxx ']");
$ ("#selId option[index= ' x ']");

After the 2 methods have been tested, all return object, but the. Val () method returns the Undefined,.text () method returned as empty, and the. attr ("selected", true) method has no effect, it is recommended not to use!!

2. Get the text of the selected item in the drop-down box:
$ ("#selId"). Find ("option:selected"). Text ();

3. Get the value of the drop-down box selected item:
$ ("#selId"). Val ();

4. Get the index of the selected item in the drop-down box:
$ ("#selId"). Get (0). SelectedIndex;

"Get (0)" Gets the selected item

For example:

<select id= "Selid" >    <option value= "a" >AAA</option>    <option value= "B" >bbb</ option>    <option value= "C" >CCC</option>    <option value= "E" selected= "selected" >EEE< /option></select>

Use this method to obtain an index value of 3 for the selected item in the top and bottom dropdown box.

5. Set the selection of the drop-down box:
$ ("#selId"). Get (0). SelectedIndex = index;

Sets the index value of the selected item in the drop-down box =index the selected item

$ ("#selId"). attr ("value", "xxx");
$ ("#selId"). val ("xxx");
$ ("#selId"). Get (0). Value = "XXX";

The above 3 methods are to set the value of the option in the dropdown box = "XXX" is selected

6. Add drop-down box options:
$ ("#selId"). Append ("<option value= ' value ' >Text</option>");

$ ("#selId"). Prepend ("<option value= ' value ' >Text</option>");

"Append" is added at the end of the drop-down box, after which the index value of the item is added, and "prepend" is added at the header of the drop-down box, after which the index value is 0.

7. Remove the drop-down box option:
$ ("#selId option[value= ' xxx ']"). Remove ();

Option to remove drop-down box option value "XXX"

8. Empty the drop-down box for all options:
$ ("#selId"). empty ();
$ ("#selId option"). Remove ();

Js/jquery operation Select drop-down box

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.