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?

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.


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

8

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

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

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 )


2

Tente seguir o código

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

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() + " ";
      });

1

Isso funcionou para mim:

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

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!


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

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

0

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

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


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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.