如何在javascript中从select标记中获取值 - how to get value from select tag in javascript

how to get value from select tag in javascript

本文关键字：获取 select javascript 中从 | 更新日期: 2023-09-27

嗨，我对Javascript没有什么问题。我用数据库记录填充下拉菜单。

function selectCountry(){
    $result = @mysql_query("SELECT * from country");
    while($record = @mysql_fetch_array($result)){
        echo '<option value="'.$record['countryid'].'">'.$record['countryname'].'</option>';
    }
}

现在它已经填充了数据，我如何在javascript中获得下拉菜单值。这是我的html代码

<select name="dropdown" onchange="myFunction()">
<?php selectCountry(); ?>
</select>

当我编写javascript函数时，据说无法读取null的属性"options"

function myFunction(){
    var e = document.getElementById("dropdown");
    var elementValue = e.options[e.selectedIndex].value;
    console.log(elementValue);
}

将id添加到您选择的

<select name="dropdown" onchange="myFunction()" id="dropdown">
                                                ^            ^

您正在根据脚本中的id获取值，但id不存在。

这里还有一个最佳解决方案

<select name="dropdown" onchange="myFunction(this.value)">
   <option value="1">1</option>
   <option value="2">2</option>
</select>

脚本中

function myFunction(val){    
   alert(val)
}

Fiddle演示

将"this"作为参数添加到myFunction（）中，因为它读作

<select name="dropdown" onchange="myFunction(this)">

JavaScript将"this"作为当前对象（下拉列表）处理为调用函数

现在将您的JavaScript函数修改为

function myFunction(obj){

    return obj.options[obj.selectedIndex].value;

}

您可以使用这个直接通过id获取值，其中"下拉列表"是<select> id:

var elementValue = document.getElementById("dropdown").value;

如果你通过名称获得值，你可以使用它，其中"下拉列表"是<select>名称：

document.getElementsByName("dropdown")[0].value