html select 元素下拉点击事件

天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并不适合使用 click 来触发，而要使用 change 事件。

select元素下拉的click事件

html代码

<select name="mochu" id="mochu">
 <option value="1">下拉1</option>
 <option value="2">下拉2</option>
 <option value="3">下拉3</option>
 <option value="4">下拉4</option>
</select>
<script>
 $('#mochu').click(function(){
 console.log($(this).val());
 });
</script>

点击下拉后，输出信息如下：

通过上图可以发现，如果 select 元素的下拉菜单使用 click 事件的话，会输出两次结果，也就说在展开下拉菜单之前与选择下拉菜单之后分别触发了 click 事件，所以 select 下拉选项的触发事件，不能使用 click，而使用 change 事件。

javascript select 元素的触发事件

示例代码

<select name="mochu" onchange="GetVal(this)">
 <option value="下拉1">选项1</option>
 <option value="下拉2">选项2</option>
 <option value="下拉3">选项3</option>
 <option value="下拉4">选项4</option>
</select>
<script>
 function GetVal(obj){
 //代表的是选中项的index索引
 var index = obj.selectedIndex;
 //代表的是选中项的的值
 var val = obj.options[index].value;
 //代表的是选中项的text
 var txt = obj.options[index].text;
 console.log(index);
 console.log(val);
 console.log(txt);
 }
</script>

输出结果：

头条创作挑战赛# HTMLSelectElement对象是Excel VBA中用于表示网页中的下拉列表的对象。通过该对象，可以获取和设置下拉列表的选项、选中项、样式等属性。

以下是6个代码实例，展示了HTMLSelectElement对象的常见用法：

1、创建HTMLSelectElement对象并向下拉列表中添加选项：

Dim ie As Object
Dim selectElement As Object

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

selectElement.Options.Add "Option 1" ' 添加选项1
selectElement.Options.Add "Option 2" ' 添加选项2
selectElement.Options.Add "Option 3" ' 添加选项3

2、获取下拉列表中当前选中的选项的值：

Dim ie As Object
Dim selectElement As Object
Dim selectedOption As Object

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

Set selectedOption = selectElement.Selected
MsgBox selectedOption.Value ' 显示当前选中的选项的值

3、设置下拉列表的选中项：

Dim ie As Object
Dim selectElement As Object

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

selectElement.Value = "Option 2" ' 将选项2设置为选中项

4、获取下拉列表中所有选项的数量：

Dim ie As Object
Dim selectElement As Object
Dim optionCount As Integer

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

optionCount = selectElement.Options.Length ' 获取选项数量
MsgBox "选项数量：" & optionCount

5、设置下拉列表的可见性：

Dim ie As Object
Dim selectElement As Object

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

selectElement.Style.Visibility = "hidden" ' 隐藏下拉列表

6、禁用下拉列表的使用：

Dim ie As Object
Dim selectElement As Object

Set ie = CreateObject("InternetExplorer.Application")
ie.Visible = False
ie.Navigate "https://www.example.com"

Do While ie.Busy Or ie.ReadyState <> 4
    DoEvents
Loop

Set selectElement = ie.Document.getElementById("mySelect") ' 假设网页中存在id为"mySelect"的下拉列表

selectElement.Disabled = True ' 禁用下拉列表

注意：以上示例中，需要先定义并创建InternetExplorer对象(ie)来实现对网页的操作。使用ie.Navigate方法可以加载指定的网页地址。在操作之前，需要确保网页完全加载完成(通过判断ie.Busy和ie.ReadyState属性)。此外，根据实际网页中下拉列表的特点和属性，上述代码可能需要进行一些调整。

在使用HTMLSelectElement对象时，需要注意以下几点：

1、确保网页加载完成：在使用HTMLSelectElement对象之前，需要确保相关网页已经完全加载完成。可以通过监测InternetExplorer对象的Busy和ReadyState属性来确定网页是否加载完成。

2、获取选择选项：使用HTMLSelectElement对象的Options属性可以获取下拉列表中的选项。可以使用Options.Item(index)或者Options.Item("value")来获取指定索引或值的选项。

3、设置选中选项：可以通过设置HTMLSelectElement对象的Value属性来选中指定的选项。需要注意，选项的值必须与下拉列表中存在的选项值匹配。

4、添加和移除选项：使用HTMLSelectElement对象的Options.Add方法可以向下拉列表中添加新的选项，使用Options.Remove方法可以移除指定的选项。

5、获取选中项：使用HTMLSelectElement对象的Selected属性可以获取当前选中的选项。可以通过Selected.Value来获取选中选项的值。

6、设置下拉列表的可见性和禁用状态：在操作HTMLSelectElement对象时，还可以设置下拉列表的可见性和禁用状态。可以通过设置Style.Visibility属性来控制下拉列表的可见性，使用Disabled属性可以禁用下拉列表的使用。

7、异常处理：在操作HTMLSelectElement对象时，可能会遇到一些异常情况，比如找不到指定的下拉列表或选项。需要适时进行异常处理，以确保程序的正常执行。

需要注意的是，上述注意事项基于使用InternetExplorer对象进行网页操作的前提。如果使用其他方法或库来进行网页操作，注意事项可能会有所不同。在实际应用中，应根据具体情况进行适当的调整和验证。

文介绍如何实现select下拉选项的联动效果，用户及部门信息一般是通过后端读取数据库返回的，用户一般都会属于某个部门，它们之间大多通过某个相同的ID进行关联，那么想当然地在前端选择用户时自然希望能够自动带出部门信息，避免多余的用户操作。

以上面的gif展示为例，要实现申请人和申请人部门的联动，必须要找到它们之间的关联，这里就是部门ID。

申请人信息中一定带有部门ID信息，我们可以在前端展现时，将申请人的部门ID信息写入到option中的data属性中，然后在js中跟踪申请人的选择改变事件，就可以获取到选中option的data值。

接着再遍历申请人部门的option元素，只要option的value值（value为申请人部门的ID）和选中申请人的部门ID相同，就设置该option为选中状态，这样就实现了自动联动申请人部门。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript实现select联动</title>

</head>

<body>

    <h1>JavaScript实现select联动</h1>

    <div>

        <label for="user_name" class="form-label">申请人</label>

        <!-- onchange跟踪select的变化事件，并将元素id传给update_user_dept -->

        <select id="user_name" name="user_name" onchange="update_user_dept(this.id)">

            <option value="">请选择...</option>

            <!-- option中的data值记录申请人部门ID -->

              <option value="张三" data="001">张三</option>

              <option value="李四" data="002">李四</option>

              <option value="王二麻子" data="003">王二麻子</option>

        </select>

  

        <label for="user_dept" class="form-label">申请人部门</label>

        <select id="user_dept" name="user_dept">

            <option value="">请选择...</option>

                <option value="002">财务部</option>

                <option value="001">人力部</option>

                <option value="003">工程部</option>

        </select>

    </div>

    <script src="./demo.js"></script>

</body>

</html>

在demo.js定义select改变事件的处理方法update_user_dept

在线咨询

上一篇：一文详解HTML属性
下一篇：<AppML> 案例研究-HTML 模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html select 元素下拉点击事件

select元素下拉的click事件

javascript select 元素的触发事件

您的项目需求