Ottieni l'opzione selezionata dall'elemento selezionato


93

Sto cercando di ottenere l'opzione selezionata da un menu a discesa e popolare un altro elemento con quel testo, come segue. IE sta abbaiando una tempesta e non funziona in Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

Che cosa sto facendo di sbagliato?

Risposte:


187

Ecco una versione breve:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 ha fatto una buona presa, a giudicare dal nome del tuo elemento txtEntry2potrebbe essere una casella di testo, se è un qualsiasi tipo di input, dovrai usare.val() invece o in .text()questo modo:

  $('#txtEntry2').val($(this).find(":selected").text());

Per il "cosa c'è che non va?" parte della domanda: .text()non accetta un selettore, prende il testo su cui vuoi che sia impostato o niente per restituire il testo già lì. Quindi devi recuperare il testo che desideri, quindi inserirlo nel .text(string)metodo sull'oggetto che desideri impostare, come ho fatto sopra.


7
Se txtEntry2è un input di testo, al suo val()posto sarà necessario utilizzare OP .
karim79

@ karim79 - Buon punto, dal nome dell'elemento probabilmente è, in aggiornamento.
Nick Craver

sì, cambiando .text in .val e recuperando il testo in modo diverso, tutto è andato a buon fine. Grazie ragazzi
Matt

Mi hai appena salvato dall'impazzire ufficialmente!
nathanchere

15

Prova questo:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

Ecco una versione più breve che dovrebbe funzionare anche:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Errore di tipo non rilevato: Object # <HTMLSelectElement> non ha metodo 'val'
DoodleKana

1
this.valuelo risolverebbe.
Kris Selbekk

4

Con meno jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value è un semplice JavaScript.

(Fonte: SelfHTML tedesco )


2

Prova a seguire il codice

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

Per conoscere il numero di elementi selezionati utilizzare

$("select option:selected").length

Per ottenere il valore di tutti gli elementi selezionati utilizzare

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });

1

Questo ha funzionato per me:

$("#SelectedCountryId_option_selected")[0].textContent

1

La prima parte è ottenere l'elemento dal menu a discesa che può assomigliare a questo:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Per acquisire tramite jQuery puoi fare qualcosa del genere:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Dopo aver memorizzato il valore nella variabile, il passaggio successivo consiste nell'inviare le informazioni memorizzate nella variabile al campo del modulo o all'elemento HTML di tua scelta. Può essere un div p o un elemento personalizzato.

cioè <p></p> OR <div></div>

Useresti:

$ ('p'). html (iterazioni); OPPURE $ ('div'). Html (iterazioni);

Se desideri popolare un campo di testo come:

<input type="text" name="textform" id="textform"></input>

Useresti:

$ ('# textform'). text = iterations;

Ovviamente puoi fare tutto quanto sopra in meno passaggi, credo solo che aiuti le persone a imparare quando suddividi tutto in passaggi facili da capire ... Spero che questo aiuti!


1

Utilizzando la proprietà selectedOptions (HTML5) è possibile ottenere le opzioni selezionate

document.getElementbyId("id").selectedOptions; 

Con JQuery si può ottenere in questo modo

$("#id")[0].selectedOptions; 

o

$("#id").prop("selectedOptions");

La proprietà contiene un array HTMLCollection simile a questa opzione selezionata

[<option value=​"1">​ABC</option>]

o più selezioni

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

0

Quanto sopra funzionerebbe molto bene, ma sembra che tu abbia perso il typecast jQuery per il testo a discesa. Oltre a questo, sarebbe consigliabile utilizzare .val()per impostare il testo per un elemento del tipo di testo di input. Con queste modifiche il codice sarebbe simile al seguente:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

se lo hai già e usi jquery questa sarà la tua risposta:

$ ($ (questo) [0] .selectedOptions [0]). text ()


0

Dato questo HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Seleziona per descrizione per jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.