如何从javascript中的select标签获取值

Question

嗨，我有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函数时，它说

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

Answer 1

将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)
}

小提琴演示

Answer 2

您可以使用此ID直接获取值，其中“dropdown”是<select> id：

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

如果你按名称获得价值，你可以使用这个，其中“dropdown”是<select> name：

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

Answer 3

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

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

JavaScript将“this”视为调用函数的当前对象（下拉列表）

现在将您的JavaScript函数修改为

function myFunction(obj){

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

}