select下拉框添加onchange事件获取option的value值的方法

最新推荐文章于 2020-11-13 09:27:00 发布

原创最新推荐文章于 2020-11-13 09:27:00 发布 · 2.5w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#select下拉框添加onchange事件获取option的

HTML知识专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种在HTML中为select下拉框添加onchange事件以获取option的value值的方法。方法一直接通过事件属性传值，方法二则通过访问options对象获取选中项的值。

这里介绍两种select下拉框添加onchange事件获取option的value值的方法：

方法一：

HTML

   <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>select onchange 传值</title>
    </head>
    <body>
        <select  onchange="getSelectValue(this.value)">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
    </body>
    </html>

方法二：

HTML


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>select onchange 传值</title>
    </head>
    <body>
        <select  onchange="getSelectValue(this.options[this.options.selectedIndex].value)">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
    </body>
    </html>

function getSelectValue(val){
    alert(val);     
}