Question

我有两个下拉菜单，分别命名为日期和时间。我想得到单击按钮时选项标签中的文本，但javascript函数似乎不起作用。我发现了类似的问题（和答案），但没有任何效果。代码如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
    var index = document.getElementById("date").selectedIndex;
    var date = document.getElementById("date").options[index].text;
    window.alert("You selected: " + date);
}
</script>
</head>
<body>
    <select name="date">
    <option value="1">date 1</option>
    .....
    </select>

    <select name="time">
    <option value="1">time 1</option>
    .....
    </select>

    <button type="button" onclick="collectData()">Get data</button>
</body>
</html>

Answer 1

您按ID选择了元素，但您没有在任何地方分配ID。

您需要在项目中添加正确的ID：

<select id="date" name="date">
....
<select id="time" name="time">

或者您可以按名称选择项目：

var index = document.getElementsByName("date")[0].selectedIndex;

注意：getElementsByName返回一个数组，这就是添加[0]以选择具有该名称的第一个项目的原因。

Answer 2

将代码更改为

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function collectData() {
        var e = document.getElementById("date");
        var strUser = e.options[e.selectedIndex].value;
        window.alert("You selected: " + strUser);
    }
    </script>
    </head>
    <body>
        <select name="date" id="date">
        <option value="1">date 1</option>
..

        </select>

        <select name="time">
..
        </select>

        <button type="button" onclick="collectData()">Get data</button>
    </body>
    </html>

Answer 3

您正在使用getElementById('date')。因此请在选择元素中添加id属性。

Answer 4

试试这个：

function collectData() {    
    var ddl = document.getElementById("dateSelect");
    var text = ddl.options[ddl.selectedIndex].text;
    window.alert("You selected: " + text);
}

<select id="dateSelect" name="date">
    <option value="1">date 1</option>
    <option value="2">date 2</option>
    <option value="3">date 3</option>
</select>
<button type="button" onclick="collectData()">Get data</button>

这是CodePen

从html

4 个答案: