Question

如何使用JavaScript在两个不同的选择ID下访问表单中的多个选项值？

这里是代码：（JSFiddle：http://jsfiddle.net/sebastianonline/9yL4rv6j/）

（HTML5）

选择您最喜欢的水果：

<select id="mySelect">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
</select>

单击按钮返回所选水果的值。

选择一个产品量

        <label><strong>Amount:</strong></label>

        <select id="amount">
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
        </select>

<!-- text value here -->
<p id="include"></p>
<p id="include2"></p>

（JavaScript的）

    function mySelect()

{

    var x = document.getElementById("mySelect").selectedIndex;
    var p = document.getElementsByTagName("option")[x].value;
    document.getElementById("include").innerHTML = p;

}

    function myAmount()

{

    var a = document.getElementById("amount").selectedIndex;
    var b = document.getElementsByTagName("option")[a].value;
    document.getElementById("include2").innerHTML = b;

}

函数mySelect（）能够选择正确的选项值并将其插入第一段，但是，第二个函数（myAmount（））选择与第一个函数相同的选项，即使它的id指向选择ID =＆＃34;量＆＃34 ;.我需要第二个函数来选择select id =＆＃34; amount＆＃34;并将其打印在p id =＆＃34; include2＆＃34;。

Answer 1

您正在使用document.getElementsByTagName("option")，它返回文档中的所有选项元素，并非当前选择的所有选项。这当然意味着您的索引已经完成。

但是您可以使用select元素本身的.value属性在给定的select元素中获取所选选项的值：

function mySelect() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("include").innerHTML = x;
}
function myAmount() {
  document.getElementById("include2").innerHTML =
                                        document.getElementById("amount").value;
}

访问多个表单选项

1 个答案: