JavaScript or jQuery gets the option value and the method of the text content

Source: Internet
Author: User
Tags jquery library

1.html
<Divclass= "Form-group">                <label>Insurance company</label>                <Selectclass= "Form-control"ID= "Testselect">                    <optionvalue= "Peace">Ping An insurance</option>                    <optionvalue= "Pacific">Pacific Insurance</option>                    <optionvalue= "Peace">Ping An insurance</option>                </Select>        </Div>
2. Use JavaScript to get the value of option and text content
/ *JavaScript Implementation*/            varTestselect = document.getElementById ("Testselect"); Testselect.onchange=function() {//triggered when the selected item changes                varValoption = This. options[ This. Selectedindex].value;//Gets the value of optionalert (valoption); varTxtoption = This. options[ This. selectedindex].innerhtml;//gets the text in the middle of the optionalert (txtoption); }

Implementation results:

To achieve the effect we want.

3. Use jquery to get the value of option and the text content (to introduce the jquery library)
/ * implemented with jquery */            var oselect = $ ("#testSelect");            Oselect.on (' change ',function() {                var//                  var checkvalue=$ ("#testSelect"). Val ();                 + "~ ~ ~ ~" + CheckValue);            });

Operating effect:

The change method is triggered when I arbitrarily select an option

4. All code:

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <title>Insert Title here</title>        <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">        <Scripttype= "Text/javascript"src= "Js/jquery-1.10.2.min.js"></Script>        <Linkrel= "stylesheet"href= "Css/bootstrap.min.css" />        <Scripttype= "Text/javascript"src= "Js/bootstrap.min.js"></Script>        <styletype= "Text/css">Div{width:400px;margin:100px;            }        </style>    </Head>    <Body>        <Divclass= "Form-group">                <label>Insurance company</label>                <Selectclass= "Form-control"ID= "Testselect">                    <optionvalue= "Peace">Ping An insurance</option>                    <optionvalue= "Pacific">Pacific Insurance</option>                    <optionvalue= "Peace">Ping An insurance</option>                </Select>        </Div>        <Scripttype= "Text/javascript">            /*JavaScript Implementation*/            varTestselect=document.getElementById ("Testselect"); Testselect.onchange= function() { //triggered when the selected item changes                varvaloption=  This. options[ This. Selectedindex].value; //Gets the value of optionalert (valoption); vartxtoption=  This. options[ This. selectedindex].innerhtml; //gets the text in the middle of the optionalert (txtoption); }                        /*implemented with jquery*/            varOselect= $("#testSelect"); Oselect.on (' Change',function(){                varChecktext=$("#testSelect"). Find ("option:selected"). text (); //gets the text selected by the Select                varCheckValue=$("#testSelect"). Val (); Console.log (Checktext+"~~~~"+CheckValue);        }); </Script></Body></HTML>
View Code

Attached: Relevant knowledge points about Select + option

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

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

3. jquery Add/Remove option item for SELECT element:

$ ("#select_id"). Append ("<optionvalue= ' Value '>Text</option>"); Append an option (drop-down) $ ("#select_id") for select. Prepend ("<optionvalue= ' 0 '>Please select</option>"); Insert an option (first position) $ ("#select_id option:last") for Select. Remove (); Delete the index value in select maximum option (last) $ ("#select_id option[index= ' 0 ']"). Remove (); Delete option (first) $ ("#select_id option[value= ' 3 ')" with index value 0 in select. Remove (); Delete option $ ("#select_id option[text= ' 4") for value= ' 3 ' in select. Remove (); Delete option for text= ' 4 ' in select

RELATED Links: http://www.jb51.net/article/44443.htm

JavaScript or jQuery gets the option value and the method of the text content

Related Article

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.