0

フォームに 3 つのドロップダウン リストがあります。各ドロップダウンリストから選択した値をラベルに表示したい。問題は、ドロップボックス リストが 1 つしか表示されず、他の 2 つが表示されないことです。

これが私のコードです：

<script>

window.onload = function()
{

document.getElementsByName('mydropdown')[0].onchange = function(e)
{
    document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>



this is my html

<td><select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>

<td><select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td><label id="mylabel"></label></td>
4

2 に答える 2

1

更新:実例: http://jsfiddle.net/x8Rdd/1/

これは、「mydropdown」グループの最初の要素に対してのみ onchange イベントを設定しているためです。

<script>

window.onload = function()
{
var dd = document.getElementsByName('mydropdown');    
for (var i = 0; i < dd.length; i++) {
    dd[i].onchange = function(e)
    {
        document.getElementById('mylabel').innerHTML = this.value;
    };
}
}
</script>

またはそのようなもの。jQuery を使用している場合は、ループなしですべての onchange プロパティを設定できます。

于 2013-03-11T02:41:04.597 に答える
1

0 番目の要素 (選択した要素) のみを でバインドしています[0]。おそらく次のように、それらすべてにバインドする必要があります。

Array.prototype.forEach.call(document.getElementsByName('mydropdown'),
function (elem) {
    elem.addEventListener('change', function() {
        document.getElementById('mylabel').innerHTML = this.value;
    });
});

http://jsfiddle.net/UNLnx/

ところで、無効な複数の要素で同じ ID を再利用しています。

于 2013-03-11T02:42:26.503 に答える