从html中的选择标签中获取文本

Get text from select tag in html

本文关键字：获取 取文本 标签 html 选择      更新时间：2023-09-26

我有两个下拉菜单分别命名为日期和时间。我想要得到文本从选项标签，当我单击一个按钮，但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>

你在按id选择元素，但是你没有在任何地方指定id。

您需要为项目添加正确的id:

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

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

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

注意:getElementsByName返回一个数组，这就是为什么[0]被添加到选择具有该名称的第一个项目。

将代码改为

    <!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>

试试这个:

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

您正在使用getElementById('date')，所以添加id属性来选择元素

相关文章：