2008-08-08 29 views
61

Cela permet d'obtenir la valeur de tout ce qui est sélectionné dans mon menu déroulant.Obtention du texte à partir d'une zone de liste déroulante

document.getElementById('newSkill').value 

Je ne peux cependant pas savoir quelle propriété utiliser pour le texte actuellement affiché par le menu déroulant. J'ai essayé "texte" puis regardé W3Schools mais cela n'a pas eu la réponse, quelqu'un sait-il ici?

Pour ceux qui ne sont pas sûrs, voici le code HTML d'une liste déroulante.

<select name="newSkill" id="newSkill"> 
    <option value="1">A skill</option> 
    <option value="2">Another skill</option> 
    <option value="3">Yet another skill</option> 
</select> 

Répondre

111

Sur la base de votre exemple de code HTML, voici une façon d'obtenir le texte affiché de l'option sélectionnée:

var skillsSelect = document.getElementById("newSkill"); 
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text; 
+3

Pour ceux en retard à la fête, il y avait plusieurs suggestions mais personne n'a remarqué qu'ils ont dit .value où ils devraient dire .text, une journée confuse pour nous tous c'était. – Teifion

1

Est-ce que vous obtenez la bonne réponse?

document.getElementById("newSkill").innerHTML 
+5

Cela vous ramènera tout le code HTML pour les options .. comme ' ' –

7
document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value 

Si le travail

+2

L'OP veut la propriété .text, plutôt que.valeur – ninjaPixel

8

Cela devrait retourner la valeur de texte de la valeur sélectionnée

var vSkill = document.getElementById('newSkill'); 

var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML; 

alert(vSkillText); 

Props: @Tanerax pour la lecture de la question, de savoir ce qui a été demandé et répondre avant d'autres ont compris. Editer: DownModed, parce que j'ai effectivement lu une question complètement, et y a répondu, monde triste c'est.

4

Cela fonctionne je l'ai essayé moi-même je pensais que je poste ici au cas où quelqu'un besoin ...

document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text; 
0
var ele = document.getElementById('newSkill') 
    ele.onchange = function(){ 
      var length = ele.children.length 
      for(var i=0; i<length;i++){ 
       if(ele.children[i].selected){alert(ele.children[i].text)};    
      } 
    } 
2

Ajoute une événement de changement à la sélection qui obtient le texte pour chaque option sélectionnée et les écrit dans la div.

Vous pouvez utiliser jQuery très visage et efficace et facile à utiliser

<select name="sweets" multiple="multiple"> 
    <option>Chocolate</option> 
    <option>Candy</option> 
    <option>Taffy</option> 
    <option selected="selected">Caramel</option> 
    <option>Fudge</option> 
    <option>Cookie</option> 
</select> 
<div></div> 


$("select").change(function() { 
    var str = ""; 

    $("select option:selected").each(function() { 
    str += $(this).text() + " "; 
    }); 

    $("div").text(str); 
}).change(); 
0
var selectoption = document.getElementById("dropdown"); 
var optionText = selectoption.options[selectoption.selectedIndex].text; 
+0

Que diriez-vous d'un texte pour expliquer ce qui se passe? – nottinhill

+0

Tandis qu'une réponse de code seulement résout le problème pour l'op, il n'est pas recommandé car il ne fournit aucune valeur pour de futurs visiteurs, une réponse qui fournit seulement sera rapidement signalée comme "très basse qualité" et par le résultat de cela il sera supprimé rapidement. [modifier] votre réponse pour inclure une explication de ce que fait le code fourni. – Ferrybig

+0

Merci. J'espère que ma réponse sera facilement comprise par les autres. –

0

S'il vous plaît essayer le ci-dessous c'est le plus simple et il fonctionne parfaitement

var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex]; 
4

simplement vous pouvez utiliser Jquery au lieu de Javascript

$("#yourdropdownid option:selected").text(); 

Essayez ceci.

0
function getValue(obj) 
{ 
    // it will return the selected text 
    // obj variable will contain the object of check box 
    var text = obj.options[obj.selectedIndex].innerHTML ; 

} 

HTML Snippet

<asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX" 
    onchange="getValue(this)"> 
</asp:DropDownList>