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?

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.


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

8

Voici une version plus courte qui devrait également fonctionner:

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

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 )


2

Essayez de suivre le code

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

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

1

Cela a fonctionné pour moi:

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

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!


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

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

0

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

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


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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.