Question

我想使用此功能来处理我的所有下拉列表。问题：第一次下拉工作正常，但是我尝试在第二个下拉选项中选择任何选项。它将第一组的值放在第二组的范围内。我希望跨度具有来自其自己组的值。我想在多个小组中使用它。

以下代码无效。电话号码显示正常，但是当我尝试选择部件时，无论选择什么，都会显示电话号码的值。

我想要选择手机时的电话号码，以及选择部件时的部件。

谢谢

<script>function displayResult(xspan,xselect)
{
 var x=document.getElementById(xselect).selectedIndex;
 alert(x);
 var newTxt = document.getElementsByTagName("option")[x].value;

 document.getElementById(xspan).innerHTML = newTxt;
 //alert(document.getElementsByTagName("option").length);
}
</script>

<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
    <option value="">Phone  Numbers</option>
    <optgroup label="Shipping">
        <option value=" - 800-463-3339">FedEx</option>
        <option value=""></option>
    </optgroup>
</select>
<span id="ShowPhone"></span>

<select id="myParts" onchange="displayResult('ShowParts','myParts')">
    <option value="">Qik Parts list</option>
    <optgroup label="BATT">
        <option value="1">1</option>
        <option value="2">1</option>
        <option value="2">1</option>
        <option value="2"><1/option>
    </optgroup>
</select>
<span id="ShowParts"></span>

Answer 1

主要评论：

当你这样做时：

var newTxt = document.getElementsByTagName("option")[x].value;

然后document.getElementsByTagName("option")返回文档中的所有选项，您可能只想要有问题的选项。但是select的选项可以作为集合使用，因此您可以这样做：

selectElement.options[x].value;

但除非您处理的是非常旧的浏览器或没有值属性的IE，否则这是不必要的。只需使用selectElement.value。

你在哪里：

<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">

你可以改为：

<select id="myPhones" onchange="displayResult('ShowPhone', this.value)">

以便将select的当前值直接传递给函数。然后功能可以是：

function displayResult(id, value) {
    document.getElementById(id).innerHTML = value;
}

Answer 2

这应该有用，但我还没有测试过。

function displayResult(spanId, selectId) {
    document.getElementById(spanId).innerHTML = document.getElementById(selectId).value;
}

如何使用document.getElementsByTagName（

2 个答案: