jquery gets a Select value summary of various methods

Source: Internet
Author: User

Gets the text of the Select selected item

var item = $ ("select[@name =items] option[@selected]"). Text ();

The second element of the Select Drop-down box is the currently selected value

$ (' #select_id ') [0].selectedindex = 1;

Take value

JQuery ("#select1"). Val (); Is to get the selected value,


Example

The code is as follows Copy Code

<select Multiple= "multiple" id= "Select1"   size= "5"   name= "dd"
<optgroup label= "Pit dad combination"
             <option value= "1" disabled= "disabled" > I le go! </option>
            <option value= "2" > Hang on, Dad! </option>
</optgroup>
            < Option value= "3" >http://www.111cn.net Ah! </option>
            <option id= "Si" selected = "Selected"   value= "4" > Wax gourd! </option>
            <option value= "5" > I go! </option>
</select>

Let's start with the <select> label. http://www.111cn.net!
⑴multiple This attribute can be more selective! Its writing is: multiple= "multiple"
⑵size= "3", that is, this select tag can have 3 option at most
⑶disabled= "Disabled": this property is prohibited from pulling down the dropdown box! Just can't use it!
The seleted= "selected" in ⑷option is the option that is displayed in the dropdown box when initialized. Plainly is the default selected!
⑸optgroup This tag is categorized in option options, which is convenient for us to choose from. But it's not a option!.
⑹disabled= "disabled" means banning the option option, which means you can only watch but not choose. It's a pit, Dad!
The ⑺value attribute is value, which is of no use and is value when transmitted to the server.

Oh! Write so many useless, next write jquery!
⑴$ ("#select1"). Find ("option:selected"). Text ()
The meaning is to select <select> tag, then find the Option tab with the selected attribute tag, and finally get the text content of this label, the text is to get: "Wax gourd!" “
⑵$ ("#select1"). Val ()
is to get the value mentioned above, but one thing to note: If there is a default value selected attribute in all option, then the result of this code is the value of this option. If there is no selected attribute in option, the value value of the first option is displayed. If the value is not set, the text () content is displayed.
Article: The result is "4", if the line of the value= "4" removed, will show: "Wax Gourd!" ”
⑶$ ("#si"). attr ("value", "Donggua");
$ ("#si"). Val ("Donggua");
$ ("#si"). Get (0). Value = "Donggua";
This will not explain! is to assign a value to option!
⑷$ ("#select1"). Get (0). Options[3].value
Get (0) Gets the DOM object of this select and operates on it. This is the value of the operation, you can change to text, the text of its operation! You can also replace the selected, but return the following: false or True
⑸$ ("#select1 option[text= ' pit Dad!") '] '). attr ("selected", true)
That's all clear. Set the selected property
⑹$ ("#select1"). Append ("<option value= ' 8 ' selected= ' selected ' >donggua</option>");
Append all know is the element inside append content, here I just add a line option meaning
⑺$ ("#select1"). Prepend ("<option value= ' 9 ' > Please select </option>");
Prepend is the meaning of the preset, here is also the meaning of adding a line of option, with the above is the difference. Prepend is added in the first bit of the Select, and append is added in the last one.
⑻$ ("#select1 option:last"). Remove ()//delete last line
$ ("#select1 option[value= ' 4 ']"). Remove ()//delete line Fourth
$ ("#san"). Remove (); Delete the third row;
$ ("#select1"). empty (); Delete all option


Other information on


Gets the text selected by select:
$ ("#ddlregtype"). Find ("option:selected"). Text ();

Gets the value selected by select:
$ ("#ddlregtype"). Val ();

Gets the index selected by select:
$ ("#ddlregtype"). Get (0). SelectedIndex;

Set Select:
Set the index selected by select:
$ ("#ddlregtype"). Get (0). Selectedindex=index;//index is the index value

Set the value selected by select:

The code is as follows Copy Code
$ ("#ddlregtype"). attr ("value", "normal");
$ ("#ddlregtype"). Val ("normal");
$ ("#ddlregtype"). Get (0). value = value;

Set selected text for select:

The code is as follows Copy Code

var count=$ ("#ddlregtype option"). Length;
for (Var i=0;i<count;i++)
{if ($ ("#ddlregtype"). Get (0). Options[i].text = text)
{
$ ("#ddlregtype"). Get (0). options[i].selected = true;
Break
}
}
$ ("#select_id option[text= ' jquery ']"). attr ("selected", true);

To set the SELECT option item:

The code is as follows Copy Code
$ ("#select_id"). Append ("<option value= ' value ' >text http://www.111cn.net</option>"); Add an option
$ ("#select_id"). Prepend ("<option value= ' 0 ' > Please select </option>"); Insert an option before
$ ("#select_id option:last"). Remove (); Delete the maximum index value option
$ ("#select_id option[index= ']"). Remove ()//delete option with index value of 0
$ ("#select_id option[value= ' 3 ']"). Remove (); Delete option with a value of 3
$ ("#select_id option[text= ' 4 ']"). Remove (); Delete option with text value of 4

Empty select:

  code is as follows copy code

     $ ("#ddlregtype"). empty ();

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.