tendina - menu with javascript




Ottieni il valore selezionato nell'elenco a discesa usando JavaScript? (15)

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

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

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

È possibile utilizzare querySelector .

Per esempio

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

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

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

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

NB. i nomi degli elementi del modulo devono essere univoci affinché il tuo modulo sia utilizzabile una volta pubblicato, ma il DOM può consentire a un nome di essere condiviso da più di un elemento. Per questo motivo, considera l'aggiunta di ID ai moduli, se possibile, oppure sii esplicito con i nomi degli elementi del modulo my_nth_select_named_x e my_nth_text_input_named_y .

Esempio utilizzando getElementByName :

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

Ci sono due modi per ottenere questo risultato usando JavaScript o JQuery .

JavaScript:

var getValue = document.getElementsById('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'

Ecco un modo semplice per farlo in una funzione di scambio:

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


Esecuzione di 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 il menu a discesa viene modificato, se si richiede tale funzionalità, è necessario implementare una modifica onClick.



Il codice seguente mostra vari esempi relativi al recupero / inserimento di valori dai campi di input / select utilizzando JavaScript.

DEMO funzionante

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

Lo script seguente sta ottenendo il valore dell'opzione selezionata e inserendolo nella casella di testo 1

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

Lo script seguente ottiene 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>

Lo script seguente 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>

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

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

<!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 dal vivo: http://jsbin.com/jiwena/1/edit?html,output .

id deve essere usato per scopi di trucco. Per gli scopi della forma funzionale, il name è ancora valido, anche in HTML5, e dovrebbe essere ancora utilizzato. Infine, ricordati di usare le parentesi quadre e le parentesi tonde in certi punti. Come è stato spiegato prima, solo le versioni precedenti di IE accetteranno quelle rotonde in tutti i luoghi.


Nel 2015, in Firefox , funziona anche il seguente.

e. opzioni .selectedIndex


Puoi semplicemente usare selectElement.value per ottenere il valore dell'opzione selezionata della selezione.

document.getElementById("idOfSelect").value;

var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.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>


Se hai un elemento select 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>

Esecuzione di questo codice:

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

Farebbe diventare strUser 2 . Se ciò che vuoi veramente è test2 , allora fai questo:

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

Quale renderebbe strUser essere test2


un'altra soluzione è:

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

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

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




html-select