How jquery Gets the value of select option and Operations on select option

Source: Internet
Author: User

jquery Gets the Select element and selects the text and value:

1. $ ("#select_id"). Change (function () {//code ...}); Adds an event for a select that fires when one of the items is selected
2. Var checktext=$ ("#select_id"). Find ("option:selected"). Text (); Gets the text selected by select
3. Var checkvalue=$ ("#select_id"). Val (); Gets the value of the Select selection
4. Var checkindex=$ ("#select_id"). Get (0). SelectedIndex; Get the index value selected by select
5. Var maxindex=$ ("#select_id option:last"). attr ("index"); Get the maximum index value for select

jquery Gets the Select element and sets the text and value:

Example Analysis:

1. $ ("#select_id"). Get (0). selectedindex=1; To set the Select index value of 1
2. $ ("#select_id"). Val (4); Select to set the value of 4 for the Select
3. $ ("#select_id option[text= ' jQuery ']"). attr ("selected", true); Set the text value of select to the item selected for jquery

jquery Add/Remove option items for select elements:

Example Analysis:

1. $ ("#select_id"). Append ("<option value= ' value ' >Text</option>"); Append an option to select (dropdown)
2. $ ("#select_id"). Prepend ("<option value= ' 0 ' > Please select </option>"); Inserts an option for the Select (first position)
3. $ ("#select_id option:last"). Remove (); Delete index value maximum option (last) in select
4. $ ("#select_id option[index= ' 0 ']"). Remove (); Delete option with index value of 0 in select (first)
5. $ ("#select_id option[value= ' 3 ']"). Remove (); Delete option value= ' 3 ' in select
6. $ ("#select_id option[text= ' 4 ']"). Remove (); Delete option text= ' 4 ' in select

Level Three classification

<select name= "Thirdlevel" id= "Thirdlevel"
Onchange= "Getfourthlevel ()" >
<option value= "0" id= "thirdoption" >
Please select level Three category
</option>
</select>
</div>

Level Four classification:
<select name= "Fourthlevelid" id= "Fourthlevelid" >
<option value= "0" id= "fourthoption" >
Please select level Four category
</option>
</select>
</div>

. if ($ ("#thirdLevel"). Val ()!=0) {
$ ("#thirdLevel option[value!=0]"). Remove ();
}
if ($ ("#fourthLevelId"). Val ()!=0) {
$ ("#fourthLevelId option[value!=0]"). Remove ();
}

This says: If we want to choose the third class when we choose: if there is data in class fourth, delete it, if there is no data in category fourth, the default value is in the product. After learning Ajax technology in the back is often used to!

Get select:

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:

$ ("#ddlRegType"). attr ("value", "Normal");

$ ("#ddlRegType"). Val ("Normal");

$ ("#ddlRegType"). Get (0). value = value;

Set selected text for select:

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:

$ ("#select_id"). Append ("<option value= ' value ' >Text</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:

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

jquery Gets the value:

. Val ()

. Text ()

Setting values

. val (' Set value here ')

$ ("document"). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("[name= ' checkbox ']"). attr ("Checked", ' true ');/select All
})
$ ("#btn2"). Click (function () {
$ ("[name= ' checkbox ']"). Removeattr ("checked");/Cancel All selection
})
$ ("#btn3"). Click (function () {
$ ("[name= ' checkbox ']:even"). attr ("Checked", ' true ');//Select All odd numbers
})
$ ("#btn4"). Click (function () {
$ ("[name= ' checkbox ']"). each (function () {//anti-election
if ($ (this). attr ("checked")) {
$ (this). Removeattr ("checked");
}
else{
$ (this). attr ("Checked", ' true ');
}
})
})
$ ("#btn5"). Click (function () {//Output selected value
var str= "";
$ ("[name= ' checkbox '][checked]"). each (function () {
str+=$ (This). Val () + "RN";
Alert ($ (this). Val ());
})
alert (str);
})
})

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.