Obtenir l'option sélectionnée à partir de l'élément sélectionné

93

J'essaie d'obtenir l'option sélectionnée dans une liste déroulante et de remplir un autre élément avec ce texte, comme suit. IE aboie une tempête et cela ne fonctionne pas dans Firefox:

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

Qu'est-ce que je fais mal?

Mat
la source

Réponses:

187

Voici une version courte:

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

karim79 a fait une bonne prise, à en juger par le nom de votre élément txtEntry2peut être une zone de texte, s'il s'agit d'un type d'entrée, vous devrez utiliser à la .val()place ou .text()comme ceci:

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

Pour le "qu'est-ce qui ne va pas?" partie de la question: .text()ne prend pas de sélecteur, il prend le texte sur lequel vous voulez qu'il soit défini, ou rien pour renvoyer le texte déjà présent. Vous devez donc récupérer le texte que vous souhaitez, puis le mettre dans la .text(string)méthode sur l'objet que vous souhaitez définir, comme je l'ai fait ci-dessus.

Nick Craver
la source
7
S'il txtEntry2s'agit d'une entrée de texte, OP devra utiliser à la val()place.
karim79
@ karim79 - Bon point, par le nom de l'élément, c'est probablement la mise à jour.
Nick Craver
oui, en changeant .text en .val et en récupérant le texte différemment, tout s'est déroulé. Merci les gars
Matt
Vous venez de me sauver de devenir officiellement fou!
nathanchere
15

Essaye ça:

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

Voici une version plus courte qui devrait également fonctionner:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
ThdK
la source
Uncaught TypeError: Object # <HTMLSelectElement> n'a pas de méthode 'val'
DoodleKana
1
this.valuele réparerait.
Kris Selbekk
4

Avec moins de jQuery:

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

this.options[this.selectedIndex].value est du JavaScript simple.

(Source: SelfHTML allemand )

Koppor
la source
2

Essayez de suivre le code

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});
cétan
la source
2

Pour connaître le nombre d'éléments sélectionnés, utilisez

$("select option:selected").length

Pour obtenir la valeur de tous les éléments sélectionnés, utilisez

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

Cela a fonctionné pour moi:

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

La première partie consiste à récupérer l'élément dans le menu déroulant qui peut ressembler à ceci:

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

Pour capturer via jQuery, vous pouvez faire quelque chose comme ceci:

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

Une fois que vous avez stocké la valeur dans votre variable, l'étape suivante consiste à envoyer les informations stockées dans la variable vers le champ de formulaire ou l'élément HTML de votre choix. Il peut s'agir d'un div p ou d'un élément personnalisé.

c'est à dire <p></p> OR <div></div>

Vous utiliseriez:

$ ('p'). html (itérations); OR $ ('div'). Html (itérations);

Si vous souhaitez remplir un champ de texte tel que:

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

Vous utiliseriez:

$ ('# textform'). text = itérations;

Bien sûr, vous pouvez faire tout ce qui précède en moins d'étapes, je pense simplement que cela aide les gens à apprendre lorsque vous divisez tout cela en étapes faciles à comprendre ... J'espère que cela vous aidera!

HappyCoder
la source
1

En utilisant la propriété selectedOptions (HTML5), vous pouvez obtenir les options sélectionnées

document.getElementbyId("id").selectedOptions; 

Avec JQuery peut être réalisé en faisant cela

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

ou

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

La propriété contient un tableau HTMLCollection similaire à cette option sélectionnée

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

ou plusieurs sélections

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

Ce qui précède fonctionnerait très bien, mais il semble que vous ayez manqué le typecast jQuery pour le texte déroulant. En dehors de cela, il serait conseillé d'utiliser .val()pour définir le texte d'un élément de type texte d'entrée. Avec ces modifications, le code ressemblerait à ceci:

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

si vous l'avez déjà et utilisez jquery, ce sera votre réponse:

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

tibi
la source
0

Compte tenu de ce HTML:

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

Sélectionnez par description pour 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
la source