jQuery Ottieni l'opzione selezionata dal menu a discesa

Di solito uso $("#id").val()per restituire il valore dell'opzione selezionata, ma questa volta non funziona. Il tag selezionato ha l'idaioConceptName

codice HTML

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Per le opzioni a discesa probabilmente vuoi qualcosa del genere:

var conceptName = $('#aioConceptName').find(":selected").text();

Il motivo val()non risolve il problema perché il clic su un'opzione non modifica il valore del menu a discesa, ma aggiunge semplicemente la :selectedproprietà all'opzione selezionata che è figlio del menu a discesa.

Imposta i valori per ciascuna delle opzioni

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()non ha funzionato perché .val()restituisce l' valueattributo. Per farlo funzionare correttamente, gli valueattributi devono essere impostati su ciascuno <option>.

Adesso puoi chiamare $('#aioConceptName').val() invece di tutto questo :selectedvoodoo suggerito da altri.

Mi sono imbattuto in questa domanda e ho sviluppato una versione più concisa della risposta di Elliot BOnneville:

var conceptName = $('#aioConceptName :selected').text();

o genericamente:

$('#id :pseudoclass')

Ciò consente di risparmiare una chiamata jQuery aggiuntiva, seleziona tutto in un colpo solo ed è più chiaro (la mia opinione).

Prova questo per valore ...

$("select#id_of_select_element option").filter(":selected").val();

o questo per il testo ...

$("select#id_of_select_element option").filter(":selected").text();

Se sei nel contesto dell'evento, in jQuery, puoi recuperare l'elemento opzione selezionato usando: in
$(this).find('option:selected')questo modo:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

modificare

Come menzionato da PossessWithin , La mia risposta risponde semplicemente alla domanda: Come selezionare l'opzione "Opzione" selezionata.

Quindi, per ottenere il valore dell'opzione, utilizzare option.val().

Hai preso in considerazione l'utilizzo di javascript semplice?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Vedi anche Ottenere un'opzione testo / valore con JavaScript

$('#aioConceptName option:selected').val();

Lettura del valore (non del testo) di una selezione:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Come disabilitare una selezione? in entrambe le varianti, il valore può essere modificato usando:

UN

L'utente non può interagire con il menu a discesa. E non sa quali altre opzioni potrebbero esistere.

$('#Status').prop('disabled', true);

B

L'utente può visualizzare le opzioni nel menu a discesa ma tutte sono disabilitate:

$('#Status option').attr('disabled', true);

In questo caso, $("#Status").val() funzionerà solo per versioni jQuery inferiori a 1.9.0. Tutte le altre varianti funzioneranno.

Come aggiornare una selezione disabilitata?

Dal codice dietro puoi ancora aggiornare il valore nella tua selezione. È disabilitato solo per gli utenti:

$("#Status").val(2);

In alcuni casi potrebbe essere necessario attivare eventi:

$("#Status").val(2).change();

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

dovresti usare questa sintassi:

var value = $('#Id :selected').val();

Quindi prova questo codice:

var values = $('#aioConceptName :selected').val();

puoi provare in Fiddle: http://jsfiddle.net/PJT6r/9/

vedi questa risposta in questo post

Utilizzando jQuery, basta aggiungere a change evento e ottenere il valore o il testo selezionato all'interno di quel gestore.

Se hai bisogno del testo selezionato, utilizza questo codice:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

O se hai bisogno di un valore selezionato, utilizza questo codice:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

Utilizzare la jQuery.val()funzione anche per selezionare elementi:

Il metodo .val () viene utilizzato principalmente per ottenere i valori degli elementi del modulo come input, select e textarea. Nel caso di elementi selezionati, ritorna nullquando non è selezionata alcuna opzione e un array contenente il valore di ciascuna opzione selezionata quando ce n'è almeno una ed è possibile selezionarne altre perché l' multipleattributo è presente.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Per chiunque abbia scoperto che la risposta migliore non funziona.

Prova ad usare:

  $( "#aioConceptName option:selected" ).attr("value");

Lavora per me in progetti recenti, quindi vale la pena guardarlo.

Solo questo dovrebbe funzionare:

var conceptName = $('#aioConceptName').val();

Semplice e piuttosto semplice:

Il tuo menu a discesa

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Codice Jquery per ottenere il valore selezionato

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

Puoi provare a eseguire il debug in questo modo:

console.log($('#aioConceptName option:selected').val())

Per ottenere il valore del tag selezionato:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

E se vuoi ottenere del testo, usa questo codice:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Per esempio:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Se vuoi afferrare l'attributo 'valore' invece del nodo di testo, questo funzionerà per te:

var conceptName = $('#aioConceptName').find(":selected").attr('value');

prova a questo

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Immagina il DDL come un array con indici, stai selezionando un indice. Scegli quello su cui desideri impostarlo con il tuo JS.

Spero che questo aiuti anche a capire meglio e ci provi di seguito,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

per maggiori dettagli si prega di http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Puoi usare $("#drpList").val();

per recuperare una selezione con lo stesso class = name potresti farlo, per verificare se un'opzione di selezione è selezionata.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

Ho avuto lo stesso problema e ho capito perché non funzionava nel mio caso
La pagina html è stata divisa in diversi frammenti html e ho scoperto che ho un altro campo di input che porta lo stesso ID del select, che ha causato il fatto val()di essere sempre vuoto
Spero che questo risparmi la giornata a chiunque abbia problemi simili.

per usare $ ("# id"). val, dovresti aggiungere un valore all'opzione come questa:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

altrimenti, puoi usare

   $("#aioConceptName").find(':selected').text();

Vorrei che aiutasse ..

Ecco la semplice soluzione per questo problema.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Probabilmente la tua scommessa migliore con questo tipo di scenario è utilizzare il metodo di modifica di jQuery per trovare il valore attualmente selezionato, in questo modo:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Preferisco questo metodo perché è quindi possibile eseguire funzioni per ciascuna opzione selezionata in un determinato campo di selezione.

Spero che aiuti!

Di solito dovresti non solo ottenere il valore selezionato, ma anche eseguire alcune azioni. Quindi perché non evitare tutta la magia di jQuery e passare semplicemente il valore selezionato come argomento alla chiamata all'azione?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

Puoi selezionare usando esattamente l'opzione selezionata: Di seguito troverai innerText

$("select#aioConceptName > option:selected").text()

Mentre sotto ti darà valore.

$("select#aioConceptName > option:selected").val()