JQuery's operation with SELECT option

Source: Internet
Author: User

Calm meditation Ingit is my decision,it are my life. JQuery's operation with SELECT option

Drop-down box:

<select id= "Selectid" >
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
<option value= "6" >6</option>
</select>

Here is the basic operation for the drop-down box:

<script language= "JavaScript" >
$ (document). Ready (function () {
Bind the Drop box change event when the down box changes when calling the Selectchange () method
$ ("#selectID"). Change (function () {Selectchange ();});
})
function Selectchange () {
Gets the Text property value of the drop-down box check item
var SelectText = $ ("#selectID"). Find ("option:selected"). Text ();
alert (SelectText);
Gets the value of the drop-down box for the selected item
var Selectvalue = $ ("#selectID"). Val ();
alert (Selectvalue);
Gets the value of the Index property of the drop-down box selected item
var Selectindex = $ ("#selectID"). Get (0). SelectedIndex;
alert (Selectindex);
Gets the maximum Index property value for the drop-down box
var Selectmaxindex = $ ("#selectID option:last"). attr ("index");
alert (Selectmaxindex);
}

function aa () {
Select the option to set the drop-down box to the Index property of 5
$ ("#selectID"). Get (0). SelectedIndex = 5;
}
function bb () {
The option to set the drop-down box Value property to 4 is selected
$ ("#selectID"). Val (4);
}
function cc () {
Select the option to set the drop-down box Text property to 5
$ ("#selectID option[text=5]"). attr ("Selected", "Selected"); $ ("#yyt option:contains ('5'). attr ("selected", true); }
function dd () {
Add an option at the end of the drop-down box
$ ("#selectID"). Append ("<option value= ' 7 ' >7</option>");
}
function ee () {
Add an option to the top of the dropdown box
$ ("#selectID"). Prepend ("<option value= ' 0 ' >0</option>")
}
function ff () {
Remove the last option from the drop-down box
$ ("#selectID option:last"). Remove ();
}

function Gg () {
Remove drop-down box option with Index property of 1
$ ("#selectID option[index=1]"). Remove ();
}

function hh () {
Remove drop-down box option for Value property 4
$ ("#selectID option[value=4]"). Remove ();
}
Function II () {
Remove drop-down box option for Text property 5
$ ("#selectID option[text=5]"). Remove ();
}
</script>

JQuery's operation with SELECT option

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.