Home > Developer > JavaScript
<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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
