Gaukite pasirinktą vertę išskleidžiamajame sąraše, naudodami javascript?

Kaip gauti pasirinktą vertę iš išskleidžiamojo sąrašo naudojant „JavaScript“?

Bandžiau toliau aprašytus metodus, tačiau jie visi grąžina pasirinktą indeksą vietoj vertės:

 var as = document.form1.ddlViewBy.value; var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; var value = document.getElementById("ddlViewBy").value; 
1455
06 июля '09 в 10:25 2009-07-06 10:25 „Fire Hand“ yra nustatytas liepos 06 d., 09:25, 2009-07-06 10:25
@ 23 atsakymai

Jei turite pasirinktą elementą, kuris atrodo taip:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 

Padaryti strUser būti 2 . Jei tikrai norite test2 , atlikite šiuos veiksmus:

2457
06 июля '09 в 10:29 2009-07-06 10:29 atsakymą pateikė Paolo Bergantino liepos 06 d., 09:29 2009-07-06 10:29

Reguliarus javascript:

 var e = document.getElementById("elementId"); var value = e.options[e.selectedIndex].value; var text = e.options[e.selectedIndex].text; 

Jquery

 $("#elementId :selected").text(); // The text content of the selected option $("#elementId").val(); // The value of the selected option 

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

 // HTML <select ng-model="selectItem" ng-options="item as item.text for item in items"> </select> <p>Text: {{selectItem.text}}</p> <p>Value: {{selectItem.value}}</p> // JavaScript $scope.items = [{ value: 'item_1_id', text: 'Item 1' }, { value: 'item_2_id', text: 'Item 2' }]; 
305
18 дек. atsakymą pateikė Vitalii Fedorenko 18 d. 2011-12-18 05:08 '11 at 5:08 2011-12-18 05:08
 var strUser = e.options[e.selectedIndex].value; 

Tai teisinga ir turėtų suteikti jums vertę. Ar šis tekstas jums reikalingas?

 var strUser = e.options[e.selectedIndex].text; 

Taigi, jūs supratote terminiją:

 <select> <option value="hello">Hello World</option> </select> 

Ši parinktis turi:

  • Indeksas = 0
  • Vertė = hello
  • Tekstas = Sveikas pasaulis
162
06 июля '09 в 10:29 2009-07-06 10:29 atsakymas, kurį pateikė Greg, liepos 06 '09, 10:29 2009-07-06 10:29

Šis kodas parodo įvairius pavyzdžius, susijusius su vertybių iš įvedimo / pasirinkimo laukų naudojimu naudojant „JavaScript“.

Šaltinio nuoroda

Darbo demo

  <select id="Ultra" onchange="run()"> <!--Call run() function--> <option value="0">Select</option> <option value="8">text1</option> <option value="5">text2</option> <option value="4">text3</option> </select><br><br> TextBox1<br> <input type="text" id="srt" placeholder="get value on option select"><br> TextBox2<br> <input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()"> 

Šis scenarijus gauna pasirinkto parametro reikšmę ir įdeda į teksto laukelį 1

 <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> 

Sekantis scenarijus gauna vertę iš 2 teksto lauko ir praneša apie vertę

 <script> function up() { //if (document.getElementById("srt").value != "") { var dop = document.getElementById("srt").value; //} alert(dop); } </script> 

Sekantis scenarijus kviečia funkciją iš funkcijos

 <script> function up() { var dop = document.getElementById("srt").value; pop(dop); // Calling function pop } function pop(val) { alert(val); }? </script> 
50
03 дек. Atsakymas duotas Kodas Spy 03 Dec. 2012-12-03 09:50 '12 at 9:50 2012-12-03 09:50
 var selectedValue = document.getElementById("ddlViewBy").value; 
29
25 окт. atsakymas, kurį pateikė Mohammad Faisal, spalio 25 d. 2013-10-25 16:27 '13, 16:27, 2013-10-25 16:27

Jei kada nors peržiūrėsite tik IE parašytą kodą, galite pamatyti:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options(e.selectedIndex).value; 

Didesnis „Firefox“ ir kt. Veikimas suteiks „ne funkcijų“ klaidą, nes IE leidžia išvengti () vietoj []:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 

Teisingas būdas yra naudoti skliaustelius.

18
18 июня '12 в 18:28 2012-06-18 18:28 atsakymą pateikė Carl Onager, birželio 18, 12 d., 06:28 2012-06-18 18:28
 <select id="Ultra" onchange="alert(this.value)"> <option value="0">Select</option> <option value="8">text1</option> <option value="5">text2</option> <option value="4">text3</option> </select> 
13
14 апр. Atsakymą pateikė boateng 14 Bal. 2015-04-14 16:45 '15, 4:45 pm 2015-04-14 16:45

Tiesiog naudokite

  • $('#SelectBoxId option:selected').text(); už tekstą

  • $('#SelectBoxId').val(); gauti pasirinktą indekso vertę

12
18 февр. Atsakymą pateikė Marvil Joy , vasario 18 d. 2014-02-18 14:01 '14 at 14:01 2014-02-18 14:01

Pradedantiesiems tikriausiai norės pasiekti reikšmes iš atributo „NAME“, turinčio „NAME“ atributą, o ne su ID atributu. Mes žinome, kad visi formos elementai turi vardus, net prieš jiems suteikiant ID.

Taigi, getElementByName() sprendimą naujiems kūrėjams, kad taip pat matytumėte.

Nb. Formos elementų pavadinimai turi būti unikalūs, kad jūsų forma būtų naudojama po paskelbimo, tačiau DOM gali leisti bendrinti daugiau nei vieną elementą. Dėl šios priežasties apsvarstykite galimybę pridėti formų identifikatorius, jei galite, arba aiškiai su formų my_nth_select_named_x ir my_nth_text_input_named_y elementų pavadinimais.

getElementByName naudojimo pavyzdys:

 var e = document.getElementByName("my_select_with_name_ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 
11
09 марта '11 в 6:32 2011-03-09 06:32 Atsakymą pateikė Ben Greenaway, kovo 09 '11, 06:32 2011-03-09 06:32

Ankstesni atsakymai vis dar palieka galimybių tobulėti dėl galimybių, kodo intuityvumo ir id ar name . Galite gauti tris pasirinktos parinkties duomenis - indekso numerį, jo vertę ir tekstą. Šis paprastas kryžminio naršyklės kodas veikia visus tris:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo GetSelectOptionData</title> </head> <body> <form name="demoForm"> <select name="demoSelect" onchange="showData()"> <option value="zilch">Select:</option> <option value="A">Option 1</option> <option value="B">Option 2</option> <option value="C">Option 3</option> </select> </form> <p id="firstP"> <p id="secondP"> <p id="thirdP"> <script> function showData() { var theSelect = demoForm.demoSelect; var firstP = document.getElementById('firstP'); var secondP = document.getElementById('secondP'); var thirdP = document.getElementById('thirdP'); firstP.innerHTML = ('This option\ index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)'); secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value); thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text); } </script> </body> </html> 

Tiesioginis demonstravimas: http://jsbin.com/jiwena/1/edit?html,output .

id turėtų būti naudojamas kosmetikos tikslais. Funkcinės formos tikslais name toliau galioja, taip pat ir HTML5, ir jis vis tiek turėtų būti naudojamas. Galiausiai, tam tikrose vietose atkreipkite dėmesį į naudojimo kvadratą ir skliaustelius. Kaip paaiškinta anksčiau, tik (senesnės versijos) IE visose vietose priims raundą.

8
22 мая '15 в 5:42 2015-05-22 05:42 atsakymą pateikė Frank Conijn , gegužės 15 d., 15 val. 5:42 2015-05-22 05:42

Galite naudoti querySelector .

Pavyzdžiui.

 var myElement = document.getElementById('ddlViewBy'); var myValue = myElement.querySelector('[selected]').value; 
6
05 янв. Atsakymas pateikiamas Rounin 05 sausio 2018-01-05 01:36 '18 ne 1:36 2018-01-05 01:36

Žr. Straipsnį „Išskleidžiamojo elemento pasirinkimas“ naudojant „JavaScript“ arba „jQuery“ . Tai paaiškino įvairiais būdais, naudojant „JavaScript“ ir „jQuery“.

Naudojant jQuery:

 $('select').val(); 
6
25 мая '16 в 21:42 2016-05-25 21:42 atsakymą pateikė vartotojo5846985 gegužės 25, 16, 21:42 2016-05-25 21:42

Paleiskite, kaip jis veikia, pavyzdį:

 <select id="ddlViewBy"> <option value="1">test1</option> <option value="2">test2</option> <option value="3" selected="selected">test3</option> </select> 

Pastaba Vertės nepasikeičia, kai pasikeičia išskleidžiamajame sąraše, jei jums reikia šios funkcijos, tada turi būti įdiegtas „onClick“ pakeitimas.

4
02 авг. atsakymą pateikė Ani Menon 02 rug. 2017-08-02 16:19 '17, 16:19 pm 2017-08-02 16:19

Jei sutinkate su pirmiau pateiktais atsakymais, aš tai darau kaip vieną eilutę. Tai yra tikrojo pasirinkto teksto tekstas. Yra gerų pavyzdžių, kaip gauti indekso numerį. (Ir tekstui, aš tik norėjau parodyti tokiu būdu)

 var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text 

Kai kuriais retais atvejais gali tekti naudoti skliaustelius, tačiau tai bus labai reti.

 var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text; 

Aš abejoju, kad tai greitesnis nei dviejų eilučių versija. Aš norėčiau kuo labiau konsoliduoti savo kodą.

Jei kas nors žino, kaip tai padaryti vienoje eilutėje, negaunant elemento du kartus, norėčiau, kad komentuotumėte ir parodytumėte, kaip tai padaryti. Aš vis dar negalėjo suprasti ...

3
12 мая '17 в 19:25 2017-05-12 19:25 atsakymas pateikiamas Genko gegužės 12 d. 17 d. 19:25 2017-05-12 19:25

2015 m. „ Firefox“ atlieka šiuos veiksmus.

e .selectedIndex parinktys

3
23 окт. Hector Llorens atsakymas spalio 23 d 2015-10-23 01:38 '15 - 1:38 2015-10-23 01:38

Čia yra „JavaScript“ kodo eilutė:

 var x = document.form1.list.value; 

Darant prielaidą, kad išskleidžiamajame meniu su vardų sąrašo name="list" ir yra įtrauktas į formą su atributo pavadinimu name="form1" .

2
28 февр. Atsakymą pateikė Belgacem Ksiksi vasario 28 d. 2017-02-28 00:04 '17 - 0:04 2017-02-28 00:04

Kitas sprendimas:

 document.getElementById('elementId').selectedOptions[0].value 
2
18 июля '18 в 21:49 2018-07-18 21:49 Atsakymą pateikė JworKer, liepos 18 d., 18 val., 09:49 PM 2018-07-18 21:49

Yra du būdai tai padaryti naudojant „ JavaScript arba „ JQuery .

„Javascript“:

 var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value; alert (getValue); // This will output the value selected. 

Arba tas pats

 var ddlViewBy = document.getElementById('ddlViewBy'); var value = ddlViewBy.options[ddlViewBy.selectedIndex].value; var text = ddlViewBy.options[ddlViewBy.selectedIndex].text; alert (value); // this will output the value selected alert (text); // this will output the text of the value selected 

„Jquery“:

 $("#ddlViewBy:selected").text(); // Text of the selected value $("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy' 
2
23 июля '18 в 16:18 2018-07-23 16:18 Dulith De Costa atsakymas liepos 23 d. 18 d. 4:18 val. 2018-07-23 16:18

Vienintelė priežastis, dėl kurios galiu matyti, kad šis kodas neveikia, yra naudoti IE7 ir pamiršote nurodyti savo <option> -tags reikšmės atributą ... Kiekviena kita naršyklė turi konvertuoti tai, kas yra atvirų uždaromų žymių viduje parametrų reikšmes.

1
06 июля '09 в 10:33 2009-07-06 10:33 atsakymą pateikė „ peirix“ liepos 06 d., 10:33, 2009-07-06 10:33

Tiesiog atlikite: document.getElementById('idselect').options.selectedIndex

Tada gausite indekso reikšmę nuo 0.

0
22 дек. atsakymas duotas Knautiluzo gruodžio 22 d 2018-12-22 18:03 '18, 6:03 val. 2018-12-22 18:03

Turiu šiek tiek kitokią nuomonę apie tai, kaip tai pasiekti. Paprastai tai darau tokiu būdu: (Tai paprastesnis būdas ir darbas su kiekviena naršykle, kiek aš žinau).

 <select onChange="functionToCall(this.value);" id="ddlViewBy"> <option value="value1">Text one</option> <option value="value2">Text two</option> <option value="value3">Text three</option> <option value="valueN">Text N</option> </select> 
0
12 окт. atsakymą ThomAce pateikė spalio 12 d. 2018-10-12 14:39 '18, 14:39 pm 2018-10-12 14:39

Galite pasirinkti selectElement.value kad gautumėte pasirinkto parametro vertę.

 document.getElementById("idOfSelect").value; 

 <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Change value of the select to show the value. <p> </p> 
0
03 нояб. atsakymas pateikiamas hev1 03 lapkričio. 2018-11-03 22:10 '18 prie 10:10 pm 2018-11-03 22:10

Čia yra paprastas būdas tai padaryti mainų funkcijoje:

event.target.options[event.target.selectedIndex].dataset.name

-1
16 апр. atsakymas pateikiamas zackify 16 apr. 2014-04-16 23:52 '14, 11:52 pm 2014-04-16 23:52

Kiti klausimai dėl etikečių arba Ask a Question