web-dev-qa-db-fra.com

HTML JavaScript Dropdown selectedIndex

J'essaie d'obtenir le menu déroulant pour changer la zone de texte, mais semble avoir des problèmes. 

<head>
    <title>DropDown</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.20" />
    <script type="text/javascript">
        function chkind() {
            var dropdown1 = document.getElementById('dropdown1');
            var textbox = document.getElementById('textbox');
            var a = dropdown1.options[dropdown1.selectedIndex];
            if(a == 0){
                textbox.value = "hi";
            } else if(a == 1) {
            textbox.value = "bye";
        }
    }
    </script>
</head>

<body>
    <select onchange="chkind()" id="dropdown1">
        <option>Hi</option>
        <option>Bye</option>
    </select><br />
    <input id="textbox" type="text" />
</body>
javascripthtmldrop-down-menuhtml-select
8
yanike

Probablement juste:

var a = dropdown1.selectedIndex;

si vous essayez de vérifier que l'option zeroth est sélectionnée.

Soit ça, ou donnez vos valeurs d’options au HTML et vérifiez les valeurs elles-mêmes.

11
ADW

Vous devez sélectionner la propriété value comme suit:

var a = dropdown1.options[dropdown1.selectedIndex].value;
2
NakedBrunch

Je vous conseillerais de le faire de cette façon:

<head>
    <title>DropDown</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Geany 0.20" />
        <script type="text/javascript">
        function chkind(){
        var dropdown1 = document.getElementById('dropdown1');
        var textbox = document.getElementById('textbox');
        textbox.value=dropdown1.value;
        }
        </script>
    </head>
    <body>
    <select onchange="chkind()" id="dropdown1"><option value='Hi'>Hi</option><option value = 'Bye'>Bye</option></select><br /><input id="textbox" type="text" />
    </body>

les modifications apportées au code:

  1. Tout d’abord, jetez un coup d’œil à la zone de sélection, toutes les balises d’option ont maintenant un attribut «valeur». Cela indique au navigateur quelle est la valeur que l’entrée doit avoir lorsqu’une certaine option est sélectionnée. Vous pouvez également l'utiliser à votre avantage pour définir des valeurs plus courtes que le contenu de l'option. Par exemple, lorsque vous disposez d'un outil de sélection de pays, l'une de vos options peut être <option value='US'>United Stated</option>.
  2. Dans votre script, vous n'avez plus d'instruction if, nous définissons simplement la valeur de la zone de texte sur la valeur de votre zone de sélection.
1
bigblind

ça devrait marcher. Veuillez noter que 'a' est l'élément DOM (Option)

function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex];
if(a.index == 0){
  textbox.value = "hi";
} else if(a.index == 1) {
  textbox.value = "bye";
}
}

ou 

 function chkind(){
    var dropdown1 = document.getElementById('dropdown1');
    var textbox = document.getElementById('textbox');
    if(dropdown1.selectedIndex == 0){
      textbox.value = "hi";
    } else if(dropdown1.selectedIndex == 1) {
      textbox.value = "bye";
    }
    }
1
lihnid
var a = dropdown1.selectedIndex;
    if(a == 0){
      textbox.value = "hi";
    } else if(a == 1) {
      textbox.value = "bye";
    }
    }
0
Ovais Khatri

Vous stockez la valeur de l'élément sélectionné dans la variable a afin qu'elle ne puisse pas être comparée à son index. Voir ci-dessous pour la version corrigée.

function chkind(){
    var dropdown1 = document.getElementById('dropdown1');
    var textbox = document.getElementById('textbox');
    var a = dropdown1.selectedIndex;

    if(a == 0){
      textbox.text = "hi";
    } else if(a == 1) {
      textbox.value = "bye";
    }
}
0
Alex
$('#selectid option:nth-child(1)').attr('selected', 'selected');
0
Imran