Ottieni il valore selezionato nell'elenco a discesa utilizzando JavaScript

Come posso ottenere il valore selezionato da un elenco a discesa usando JavaScript?

Ho provato i metodi seguenti, ma tutti restituiscono l'indice selezionato invece del valore:

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

Se hai un elemento selezionato che assomiglia a questo:

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

In esecuzione questo codice:

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

Sarebbe strUserstato 2. Se quello che vuoi veramente è test2, allora fai questo:

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

Il che renderebbe strUseresseretest2

JavaScript semplice:

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 :selected").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'
}];

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

Questo è corretto e dovrebbe darti il ​​valore. È il testo che cerchi?

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

Quindi sei chiaro sulla terminologia:

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

Questa opzione ha:

• Indice = 0
• Valore = ciao
• Testo = Hello World

Il codice seguente mostra vari esempi relativi all'ottenimento / inserimento di valori dai campi di input / selezione utilizzando JavaScript.

Link alla fonte

Javascript funzionante e Demo jQuery

 <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()">

Il seguente script ottiene il valore dell'opzione selezionata e lo inserisce nella casella di testo 1

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

Il seguente script sta ottenendo un valore da una casella di testo 2 e avvisa con il suo valore

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

Il seguente script chiama una funzione da una funzione

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

    function pop(val) {
        alert(val);
    }?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

Se ti capita di imbatterti in codice scritto esclusivamente per Internet Explorer potresti vedere questo:

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

Eseguire quanto sopra in Firefox e altri ti darà un errore 'non è una funzione', perché Internet Explorer ti consente di cavartela usando () invece di []:

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

Il modo corretto è usare parentesi quadre.

<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>

Qualsiasi campo di input / modulo può utilizzare una parola chiave "this" quando vi si accede dall'interno dell'elemento. Ciò elimina la necessità di individuare un modulo nell'albero dom e quindi di individuare questo elemento all'interno del modulo.

È probabile che i principianti desiderino accedere ai valori da una selezione con l'attributo NAME anziché l'attributo ID. Sappiamo che tutti gli elementi del modulo hanno bisogno di nomi, anche prima che ottengano id.

Quindi, sto aggiungendo la getElementByName()soluzione solo per vedere anche i nuovi sviluppatori.

NB. i nomi degli elementi del modulo dovranno essere univoci affinché il modulo possa essere utilizzato una volta pubblicato, ma il DOM può consentire a un nome di essere condiviso da più di un elemento. Per questa ragione, considera l'aggiunta di ID ai moduli, se puoi, o sii esplicito con i nomi degli elementi del modulo my_nth_select_named_xemy_nth_text_input_named_y .

Esempio usando getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Esistono due modi per farlo utilizzando JavaScript o jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

O

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'

Basta usare

• $('#SelectBoxId option:selected').text(); per ottenere il testo come elencato

• $('#SelectBoxId').val(); per ottenere il valore dell'indice selezionato

Le risposte precedenti lasciano ancora margini di miglioramento a causa delle possibilità, dell'intuitività del codice e dell'uso di idversus name. È possibile ottenere una lettura di tre dati di un'opzione selezionata: il suo numero indice, il suo valore e il suo testo. Questo semplice codice cross-browser fa tutti e tre:

<!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">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <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\'s 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>

Demo live: http://jsbin.com/jiwena/1/edit?html, output .

iddovrebbe essere usato per scopi di trucco. Ai fini della forma funzionale, nameè ancora valido, anche in HTML5, e dovrebbe essere comunque utilizzato. Infine, attenzione all'uso di parentesi quadre o rotonde in determinati punti. Come spiegato in precedenza, solo (versioni precedenti di) Internet Explorer accetterà quelle rotonde in tutti i luoghi.

Utilizzando jQuery:

$('select').val();

Un'altra soluzione è:

document.getElementById('elementId').selectedOptions[0].value

Ecco un esempio di come funziona:

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

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

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

Nota: i valori non cambiano quando viene modificato il menu a discesa, se si richiede tale funzionalità, è necessario implementare una modifica onClick.

È possibile utilizzare querySelector.

Per esempio

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

Ho una visione leggermente diversa di come raggiungere questo obiettivo. Di solito lo sto facendo con il seguente approccio (è un modo più semplice e funziona con ogni browser per quanto ne so):

<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>

Nel 2015, in Firefox , funziona anche quanto segue.

e. opzioni .selectedIndex

Per andare d'accordo con le risposte precedenti, ecco come lo faccio come one-liner. Questo serve per ottenere il testo effettivo dell'opzione selezionata. Ci sono buoni esempi per ottenere già il numero indice. (E per il testo, volevo solo mostrare in questo modo)

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

In alcuni rari casi potrebbe essere necessario utilizzare le parentesi, ma questo sarebbe molto raro.

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

Dubito che questo processo sia più veloce della versione a due righe. Mi piace semplicemente consolidare il mio codice il più possibile.

Sfortunatamente questo recupera ancora l'elemento due volte, il che non è l'ideale. Un metodo che afferra l'elemento una sola volta sarebbe più utile, ma non l'ho ancora capito, riguardo a farlo con una riga di codice.

Ecco una riga di codice JavaScript:

var x = document.form1.list.value;

Supponendo che il menu a discesa sia denominato elenco name="list"e incluso in un modulo con attributo name name="form1".

Dovresti usare querySelectorper raggiungere questo obiettivo. Questo standardizza anche il modo di ottenere valore dagli elementi del modulo.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Fiddle: https://jsfiddle.net/3t80pubr/

Non so se sono io a non avere la domanda giusta, ma questo ha funzionato per me: usare un evento onchange () nel tuo html, ad es.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Questo ti darà qualunque valore sia nel menu a discesa di selezione per clic

Il modo più semplice per farlo è:

var value = document.getElementById("selectId").value;

Ecco un modo semplice per farlo in una funzione onchange:

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

Basta fare: document.getElementById('idselect').options.selectedIndex

Quindi otterrai il valore di indice selezionato, a partire da 0.

Provare

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Crea un menu a discesa con diverse opzioni (quante ne vuoi!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Ho reso un po 'divertente. Ecco lo snippet di codice:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

yay lo snippet ha funzionato