html select 元素下拉點(diǎn)擊事件

天在寫一個(gè)關(guān)于 html 中 select 下拉元素選擇的動態(tài)事件時(shí)，發(fā)現(xiàn)如果使用 javascript 中的 click 事件的話，會被執(zhí)行兩次。網(wǎng)上查了一下資料，發(fā)現(xiàn) select 元素下拉選中事件并不適合使用 click 來觸發(fā)，而要使用 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>

點(diǎn)擊下拉后，輸出信息如下：

通過上圖可以發(fā)現(xiàn)，如果 select 元素的下拉菜單使用 click 事件的話，會輸出兩次結(jié)果，也就說在展開下拉菜單之前與選擇下拉菜單之后分別觸發(fā)了 click 事件，所以 select 下拉選項(xiàng)的觸發(fā)事件，不能使用 click，而使用 change 事件。

javascript select 元素的觸發(fā)事件

示例代碼

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

輸出結(jié)果：

頭條創(chuàng)作挑戰(zhàn)賽# HTMLSelectElement對象是Excel VBA中用于表示網(wǎng)頁中的下拉列表的對象。通過該對象，可以獲取和設(shè)置下拉列表的選項(xiàng)、選中項(xiàng)、樣式等屬性。

以下是6個(gè)代碼實(shí)例，展示了HTMLSelectElement對象的常見用法：

1、創(chuàng)建HTMLSelectElement對象并向下拉列表中添加選項(xiàng)：

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") ' 假設(shè)網(wǎng)頁中存在id為"mySelect"的下拉列表

selectElement.Options.Add "Option 1" ' 添加選項(xiàng)1
selectElement.Options.Add "Option 2" ' 添加選項(xiàng)2
selectElement.Options.Add "Option 3" ' 添加選項(xiàng)3

2、獲取下拉列表中當(dāng)前選中的選項(xiàng)的值：

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") ' 假設(shè)網(wǎng)頁中存在id為"mySelect"的下拉列表

Set selectedOption = selectElement.Selected
MsgBox selectedOption.Value ' 顯示當(dāng)前選中的選項(xiàng)的值

3、設(shè)置下拉列表的選中項(xiàng)：

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") ' 假設(shè)網(wǎng)頁中存在id為"mySelect"的下拉列表

selectElement.Value = "Option 2" ' 將選項(xiàng)2設(shè)置為選中項(xiàng)

4、獲取下拉列表中所有選項(xiàng)的數(shù)量：

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") ' 假設(shè)網(wǎng)頁中存在id為"mySelect"的下拉列表

optionCount = selectElement.Options.Length ' 獲取選項(xiàng)數(shù)量
MsgBox "選項(xiàng)數(shù)量：" & optionCount

5、設(shè)置下拉列表的可見性：

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") ' 假設(shè)網(wǎng)頁中存在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") ' 假設(shè)網(wǎng)頁中存在id為"mySelect"的下拉列表

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

注意：以上示例中，需要先定義并創(chuàng)建InternetExplorer對象(ie)來實(shí)現(xiàn)對網(wǎng)頁的操作。使用ie.Navigate方法可以加載指定的網(wǎng)頁地址。在操作之前，需要確保網(wǎng)頁完全加載完成(通過判斷ie.Busy和ie.ReadyState屬性)。此外，根據(jù)實(shí)際網(wǎng)頁中下拉列表的特點(diǎn)和屬性，上述代碼可能需要進(jìn)行一些調(diào)整。

在使用HTMLSelectElement對象時(shí)，需要注意以下幾點(diǎn)：

1、確保網(wǎng)頁加載完成：在使用HTMLSelectElement對象之前，需要確保相關(guān)網(wǎng)頁已經(jīng)完全加載完成。可以通過監(jiān)測InternetExplorer對象的Busy和ReadyState屬性來確定網(wǎng)頁是否加載完成。

2、獲取選擇選項(xiàng)：使用HTMLSelectElement對象的Options屬性可以獲取下拉列表中的選項(xiàng)。可以使用Options.Item(index)或者Options.Item("value")來獲取指定索引或值的選項(xiàng)。

3、設(shè)置選中選項(xiàng)：可以通過設(shè)置HTMLSelectElement對象的Value屬性來選中指定的選項(xiàng)。需要注意，選項(xiàng)的值必須與下拉列表中存在的選項(xiàng)值匹配。

4、添加和移除選項(xiàng)：使用HTMLSelectElement對象的Options.Add方法可以向下拉列表中添加新的選項(xiàng)，使用Options.Remove方法可以移除指定的選項(xiàng)。

5、獲取選中項(xiàng)：使用HTMLSelectElement對象的Selected屬性可以獲取當(dāng)前選中的選項(xiàng)。可以通過Selected.Value來獲取選中選項(xiàng)的值。

6、設(shè)置下拉列表的可見性和禁用狀態(tài)：在操作HTMLSelectElement對象時(shí)，還可以設(shè)置下拉列表的可見性和禁用狀態(tài)。可以通過設(shè)置Style.Visibility屬性來控制下拉列表的可見性，使用Disabled屬性可以禁用下拉列表的使用。

7、異常處理：在操作HTMLSelectElement對象時(shí)，可能會遇到一些異常情況，比如找不到指定的下拉列表或選項(xiàng)。需要適時(shí)進(jìn)行異常處理，以確保程序的正常執(zhí)行。

需要注意的是，上述注意事項(xiàng)基于使用InternetExplorer對象進(jìn)行網(wǎng)頁操作的前提。如果使用其他方法或庫來進(jìn)行網(wǎng)頁操作，注意事項(xiàng)可能會有所不同。在實(shí)際應(yīng)用中，應(yīng)根據(jù)具體情況進(jìn)行適當(dāng)?shù)恼{(diào)整和驗(yàn)證。

文介紹如何實(shí)現(xiàn)select下拉選項(xiàng)的聯(lián)動效果，用戶及部門信息一般是通過后端讀取數(shù)據(jù)庫返回的，用戶一般都會屬于某個(gè)部門，它們之間大多通過某個(gè)相同的ID進(jìn)行關(guān)聯(lián)，那么想當(dāng)然地在前端選擇用戶時(shí)自然希望能夠自動帶出部門信息，避免多余的用戶操作。

以上面的gif展示為例，要實(shí)現(xiàn)申請人和申請人部門的聯(lián)動，必須要找到它們之間的關(guān)聯(lián)，這里就是部門ID。

申請人信息中一定帶有部門ID信息，我們可以在前端展現(xiàn)時(shí)，將申請人的部門ID信息寫入到option中的data屬性中，然后在js中跟蹤申請人的選擇改變事件，就可以獲取到選中option的data值。

接著再遍歷申請人部門的option元素，只要option的value值（value為申請人部門的ID）和選中申請人的部門ID相同，就設(shè)置該option為選中狀態(tài)，這樣就實(shí)現(xiàn)了自動聯(lián)動申請人部門。

<!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實(shí)現(xiàn)select聯(lián)動</title>

</head>

<body>

    <h1>JavaScript實(shí)現(xiàn)select聯(lián)動</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">財(cái)務(wù)部</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 模板

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html select 元素下拉點(diǎn)擊事件

select元素下拉的click事件

javascript select 元素的觸發(fā)事件

您的項(xiàng)目需求