Question

我刚刚看到以下内容： http://www.w3schools.com/jsref/prop_option_value.asp

想知道 selectObject.value 是否有问题。为什么不是一个简单的方法：

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                function displayResult(){
                    alert(document.getElementById("mySelect").value);
                }
            </script>
        </head>
    <body>
        <form>
            Select your favorite fruit:
            <select id="mySelect">
                  <option value="apple">Apple</option>
                  <option value="orange">Orange</option>
                  <option value="pineapple">Pineapple</option>
                  <option value="banana">Banana</option>
            </select>
        </form>
        <button type="button" onclick="displayResult()">
            Display value of selected fruit
        </button>
    </body>
</html>

似乎没有问题。

提前致谢！

麦克

Answer 1

您的方法document.getElementById("mySelect").value返回select对象的值 - 它将自己设置为当前所选选项的值。 w3Schools正在这样做的方法是找到实际的选项标签，然后你就得到了选项标签的价值。因此，只要您访问当前选定的选项标记，它们就会返回完全相同的内容。但是，w3schools方式允许您实际设置选项标签的值，而不是在设置value属性时更改选择的选项（尽管这可能不是您想要的）。

示例：

<select id='select'> <option value=1>one</option> <option value=2>two</option> </select>

x=document.getElementById("mySelect").selectedIndex;

因此，document.getElementById('select').value;返回选择元素的值。

document.getElementsByTagName("option")[x].value;返回所选选项元素的值。

意味着document.getElementById('select').value=2更改选择了哪个选项，而document.getElementsByTagName("option")[x].value=2更改所选选项元素的值。

TLDR：获取值时没有区别，设置值时会有。

选择对象值

1 个答案: