0

簡単な質問があります。次のような選択リストがあります。

var myarray = ["one", "two", "three"];
var container = document.createElement("select");  
for (var i = 0; i < myarray.length; i++) {
    var element = document.createElement("option");
    var textlabel = document.createTextNode(myarray[i]);

    if (element.nodeValue == "two") { 
        element.selected = true;
    }

    element.appendChild(textlabel); 
    container.appendChild(element);
}
document.body.appendChild(container);

それについて 2 つの質問があります。

1) 今選択すべき要素は「2つ」だと確信しています... そうではありませんか?

2)option要素はループ内で動的に作成されているため (3 つの異なるオプション変数を使用する必要はありませんが、ループが進むにつれて更新されるオプション変数は 1 つだけです)、将来の使用のために選択したものを参照するにはどうすればよいですか?

たとえば、後でユーザー入力を取得し、その入力に従って、このリストに「3」という項目が選択されているとします。

助けてくれてありがとう！あなたがそれを使いたいなら、ここにフィドルがあります...

4

3 に答える 3

1

1）今選択すべき要素は「2つ」だと確信しています…ね。

いいえ、そうではありません。element.nodeValueをチェックしますが、実際には、textLabelの1つ、またはコンテンツ自体をチェックする必要があります。

if (myarray[i] === 'two') {
  element.selected = true;
}

2）オプション要素はループ内で動的に作成されているため（3つの異なるオプション変数はありませんが、ループが進むにつれて更新されるものだけです）、将来の使用のために選択したものを参照するにはどうすればよいですか？ ？

<select>要素には2つの便利なプロパティがあります:(optionsすべてのオプションが含まれ、動的に更新されます）とselectedIndex。それらを組み合わせて、選択したオプションを取得できます。

container.addEventListener('change', function() {
   console.log(this.options[this.selectedIndex]);
}, false);

ただし、選択した要素の値を知りたい場合は、さらに簡単container.valueです。

たとえば、後でユーザー入力を取得し、その入力に従って、このリストに選択項目「3」を含めることを想像してみてください。

これに対応するオプションの位置がわかっている場合は、これは簡単なことです。selectedIndexプロパティをもう一度使用するだけです。

container.selectedIndex = 3;
于 2012-12-21T16:50:21.000 に答える
1

for選択の問題を修正するには、ループ内で次のように変更するだけです。

if (myarray[i] == "two")
于 2012-12-21T16:44:28.583 に答える
0

console.logスクリプトをデバッグするために（ChromeまたはFirefoxでfirebugで）使用してみてください：

これを試してください：

var myarray = ["one", "two", "three"];
var container = document.createElement("select");
container.id = "mySelect" ;  
    for (var i = 0; i < myarray.length; i++) {
        var element = document.createElement("option");
        var textlabel = document.createTextNode(myarray[i]);

        element.appendChild(textlabel);   

        if (element.value == "two") { 
            element.selected = true;

        }

        container.appendChild(element);
    }
        document.body.appendChild(container);

選択した要素を参照するには、選択した要素に id を与えて、以下のようにアクセスする必要があります。

el = document.getElementById('mySelect');
el.selectedIndex ; // give you the selected index
el.options[el.selectedIndex]; // give you the value
于 2012-12-21T16:48:24.050 に答える