it-swarm.it

jQuery Ottieni l'opzione selezionata da Dropdown

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

codice html

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

Per le opzioni di dropdown probabilmente vorresti qualcosa di simile a questo:

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

La ragione per cui val() non fa il trucco è perché il clic su un'opzione non cambia il valore del menu a discesa - aggiunge semplicemente la proprietà :selected all'opzione selezionata che è child del menu a discesa.

1640

Imposta i valori per ciascuna opzione

<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'attributo value. Per farlo funzionare correttamente, gli attributi value devono essere impostati su ogni <option>.

Ora puoi chiamare $('#aioConceptName').val() invece di tutto questo :selected voodoo suggerito da altri.

303
Jacob Valenta

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

Questo ti risparmia una chiamata jQuery extra, seleziona tutto in un colpo solo ed è più chiaro (secondo me).

149
Ed Orsi

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();
50

Se ti trovi nel contesto dell'evento, in jQuery, puoi recuperare l'elemento opzione selezionato usando:
$(this).find('option:selected') in 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 alla domanda: Come selezionare l'opzione selezionata. 

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

44
JoDev

Hai preso in considerazione l'utilizzo di plain old javascript?

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

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

Vedi anche Ottenere un'opzione testo/valore con JavaScript

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

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: 

A

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

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

B

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

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

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

Come aggiornare una selezione disabilitata?

Dal codice sottostante è ancora possibile aggiornare il valore nella selezione. È disabilitato solo per gli utenti:

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

In alcuni casi potrebbe essere necessario attivare eventi:

$("#Status").val(2).change();
11
profimedica
<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>
11
Ol Sen

Usa anche la funzione jQuery.val() per gli elementi selezionati:

Il metodo .val () viene utilizzato principalmente per ottenere i valori degli elementi del modulo come input, select e textarea. Nel caso di elementi selezionati, it restituisce null quando nessuna opzione è selezionata e un array che contiene il valore di ciascuna opzione selezionata quando ce n'è almeno una ed è possibile selezionare altro perché è presente l'attributo multiple.

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

9
Salman A

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

Se hai bisogno di testo selezionato, utilizza questo codice:

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

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

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

dovresti usare questa sintassi:

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

Quindi prova questo codice:

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

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

vedi di questa risposta in questo post

8
D.L.MAN

Per chiunque abbia scoperto che la risposta migliore non funziona.

Prova ad usare:

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

Lavora per me nei progetti recenti, quindi vale la pena esaminarlo.

8
user2709153

Solo questo dovrebbe funzionare:

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

Spero che questo aiuti anche a capire meglio e aiuti Prova questo di seguito, $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
per maggiori dettagli per favore http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

2
Vijayaragavan

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">
2
Haris Sultan

Puoi provare a eseguire il debug in questo modo:

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

Se vuoi prendere l'attributo 'value' anziché il nodo di testo, questo funzionerà per te:

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

Semplice e facile: 

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.
});
1
Juan J

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

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

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

0
Author PraWin

È possibile selezionare utilizzando l'opzione selezionata esatta: Di seguito verrà fornito innerText

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

Mentre sotto ti darà valore. 

$("select#aioConceptName > option:selected").val()
0
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

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

0
Satista

Per ottenere valore del tag selezionato:

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

E se vuoi ottenere text usa questo codice:

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

Ad esempio => ho selezionato questo tag:

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
0
mamal

Ho avuto lo stesso problema e ho capito perché non stava funzionando sul mio caso
La pagina html era divisa in diversi frammenti html e ho scoperto che ho un altro campo di input che porta lo stesso id della select, che ha causato che val() fosse sempre vuoto
Spero che questo salvi la giornata per chiunque abbia problemi simili.

0
Hasnaa Ibraheem

per recuperare una selezione con lo stesso nome di classe = è possibile farlo, per verificare se è selezionata un'opzione di selezione.

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

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 questo aiuti ..

0
Yusuf Azan