web-dev-qa-db-fra.com

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

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 est en train d'aboyer 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?

jqueryhtml-select
93
Matt

Voici une version courte:

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

karim79 a fait une bonne capture, à en juger par le nom de votre élément txtEntry2 peut être une zone de texte; si c'est n'importe quel type d'entrée, vous devrez utiliser .val() à la place ou .text() comme ceci:

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

Pour le "qu'est-ce qui ne va pas?" une partie de la question: .text() ne prend pas de sélecteur, il faut du texte que vous voulez définir, ou rien pour renvoyer le texte déjà présent. Vous devez donc aller chercher le texte que vous voulez, puis le placer dans la méthode .text(string) sur l'objet que vous voulez définir, comme je l'ai décrit ci-dessus.

186
Nick Craver

Essaye ça:

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

Voici une version plus courte qui devrait également fonctionner: 

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

Avec moins de jQuery:

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

this.options[this.selectedIndex].value est un code JavaScript simple.

(Source: German SelfHTML )

4
koppor

Essayez de suivre le code

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

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

Cela a fonctionné pour moi:

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

La première partie consiste à extraire l'élément du 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 au champ de formulaire ou à l'élément HTML de votre choix. Ce peut être un élément div p ou personnalisé.

i.e. <p></p> OR <div></div>

Vous utiliseriez:

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

Si vous souhaitez renseigner 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 crois simplement que cela aide les gens à apprendre lorsque vous décomposez tout en étapes faciles à comprendre ... J'espère que cela aide!

1
HappyCoder

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

document.getElementbyId("id").selectedOptions;

Avec JQuery, cela peut être réalisé 

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

ou

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

La propriété contient un tableau HTMLCollection similaire à celui de cette option One selected 

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

ou sélections multiples 

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

Ce qui précède fonctionnerait très bien, mais il semble que vous ayez oublié la conversion de type jQuery pour le texte déroulant. Sinon, il est conseillé d'utiliser .val() pour définir le texte d'un élément de type texte. Avec ces modifications, le code ressemblerait à ceci:

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

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

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

0
tibi

Étant donné ce code 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);
0
Tariq