Obtenha a opção selecionada do elemento selecionado

93

Estou tentando obter a opção selecionada em uma lista suspensa e preencher outro item com esse texto, da seguinte maneira. O IE está barulhento e não funciona no Firefox:

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

O que estou fazendo de errado?

Matt
fonte

Respostas:

187

Aqui está uma versão curta:

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

karim79 fez uma boa captura, a julgar pelo nome do seu elemento txtEntry2pode ser uma caixa de texto, se for qualquer tipo de entrada, você precisará usar no .val()lugar ou .text()assim:

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

Para o "o que há de errado?" parte da questão: .text()não pega um seletor, pega o texto que você deseja definir ou nada para retornar o texto que já está lá. Portanto, você precisa buscar o texto que deseja e colocá-lo no .text(string)método do objeto que deseja definir, como fiz acima.

Nick Craver
fonte
7
Se txtEntry2for uma entrada de texto, será necessário usar OP val().
karim79
@ karim79 - Bom ponto, pelo nome do elemento provavelmente está, atualizando.
Nick Craver
sim, mudando .text para .val e buscando o texto de forma diferente, tudo deu certo. Obrigado pessoal
Matt,
Você acabou de me salvar de ficar oficialmente louco!
nathanchere
15

Experimente isto:

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

Aqui está uma versão mais curta que também deve funcionar:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
ThdK
fonte
TypeError não capturado: Object # <HTMLSelectElement> não tem método 'val'
DoodleKana
1
this.valueiria consertar isso.
Kris Selbekk
4

Com menos jQuery:

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

this.options[this.selectedIndex].value é JavaScript simples.

(Fonte: SelfHTML alemão )

koppor
fonte
2

Tente seguir o código

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

Para saber o número de elementos selecionados, use

$("select option:selected").length

Para obter o valor de todos os elementos selecionados, use

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

Isso funcionou para mim:

$("#SelectedCountryId_option_selected")[0].textContent
Mpho Makhubele
fonte
1

A primeira parte é obter o elemento do menu suspenso, que pode ser semelhante a este:

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

Para capturar via jQuery, você pode fazer algo assim:

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

Depois de armazenar o valor em sua variável, a próxima etapa seria enviar as informações armazenadas na variável para o campo do formulário ou elemento HTML de sua escolha. Pode ser um div p ou um elemento personalizado.

ie <p></p> OR <div></div>

Você usaria:

$ ('p'). html (iterações); OR $ ('div'). Html (iterações);

Se você deseja preencher um campo de texto como:

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

Você usaria:

$ ('# textform'). text = iterações;

Claro que você pode fazer tudo isso em menos etapas, eu só acredito que ajuda as pessoas a aprender quando você divide tudo em etapas fáceis de entender ... Espero que isso ajude!

HappyCoder
fonte
1

Usando a propriedade selectedOptions (HTML5), você pode obter as opções selecionadas

document.getElementbyId("id").selectedOptions; 

Com JQuery pode ser alcançado fazendo isso

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

ou

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

A propriedade contém um array HTMLCollection semelhante a esta opção selecionada

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

ou várias seleções

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

O texto acima funcionaria muito bem, mas parece que você perdeu o typecast do jQuery para o texto suspenso. Além disso, seria aconselhável usar .val()para definir o texto para um elemento do tipo de texto de entrada. Com essas mudanças, o código ficaria assim:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());
Amit Dash
fonte
0

se você já tem e usa jquery, esta será sua resposta:

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

Tibi
fonte
0

Dado este HTML:

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

Selecione por descrição para jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
Tariq
fonte