web-dev-qa-db-ja.com

HTML JavaScriptドロップダウンselectedIndex

ドロップダウンでテキストボックスを変更しようとしていますが、問題があるようです。

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

おそらくちょうど：

var a = dropdown1.selectedIndex;

0番目のオプションが選択されていることを確認しようとしている場合。

それか、またはHTMLでオプションの値を指定して、それらの値を自分で確認します。

11
ADW

次のようにvalueプロパティを選択する必要があります。

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

このようにすることをお勧めします。

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

コードの変更：

  1. まず、選択ボックスを見てください。すべてのオプションタグに 'value'属性があります。これは、特定のオプションが選択されたときに入力に必要な値をブラウザに通知します。これを利用して、オプションの内容よりも短い値を設定することもできます。たとえば、国選択ツールがある場合、オプションの1つは<option value='US'>United Stated</option>。
  2. スクリプトでは、ifステートメントはもうありません。テキストボックスの値を選択ボックスの値に設定するだけです。
1
bigblind

これはうまくいくはずです。 「a」はDOM要素であることに注意してください（オプション）

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";
}
}

または

 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

選択したアイテムの値を変数aに格納しているため、インデックスと比較できません。修正されたバージョンについては、以下を参照してください。

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