select下拉框如何触发函数并传递参数

最新推荐文章于 2023-03-15 17:37:21 发布

刘凯KAI

最新推荐文章于 2023-03-15 17:37:21 发布

阅读量4.6k

点赞数 2

分类专栏： HTML&JS

本文链接：https://blog.youkuaiyun.com/cliukai/article/details/108593892

版权

HTML&JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在HTML中编写select下拉框并触发函数。重点强调了事件应绑定在select元素而非option元素上，并通过jQuery获取选中值来实现不同选择触发不同函数的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select下拉框和函数触发怎么写

首先需要写select下拉框的HTML代码，标准格式如下

<form>
    <select id="para_region" name="para" onchange="change()">
        <option value = 1 >选择1</option>
        <option value = 2 >选择2</option>
        <option value = 3 >选择3</option>
    </select>
</form>

这里要特别注意，触发函数要写在select的便签上！

因为选项是不能自己触发事件的，select才能注册事件，像下面这样的写法都是不正确的，不会触发任何函数。

<!--  错误的写法  -->
<option value = 1 οnchange="change()">选择1</option>
<option value = 2 οnselect="showchart2()">选择2</option>
<option value = 3 οnmοusedοwn="alert('欢迎!')">选择3</option>

触发函数怎么接收传递参数

那这样怎么传递参数呢，可以使用jquery方法去获取下拉框的选择项的值，然后根据不同的值去触发对应的函数

<script>
    function change(){
        // 获取参数
        var vs = $('select option:selected').val();
        // 触发对应的函数
        if (vs==1){showchart1();}
        if (vs==2){showchart2();}
        // 检查参数是否正确
        document.getElementById("demo2").innerHTML=vs;
    }
</script>