快捷導(dǎo)航

js中select選擇器的change事件處理函數(shù)詳解

更新時(shí)間：2023年06月23日 11:33:57 作者：小啊小菜鳥.

Js操作Select是很常見的,也是比較實(shí)用的,下面這篇文章主要給大家介紹了關(guān)于js中select選擇器的change事件處理函數(shù)的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下

js中select 選擇器的 change 事件處理函數(shù)

select 元素的 change 事件是當(dāng)用戶選擇了不同的選項(xiàng)時(shí)觸發(fā)的事件。你可以在 select 元素上添加 change 事件的監(jiān)聽器，以便在用戶進(jìn)行選擇時(shí)執(zhí)行相應(yīng)的操作。

change 事件處理函數(shù)可以使用 Event.target 屬性來獲取觸發(fā)事件的 select 元素，并使用 select.value 屬性來獲取當(dāng)前選中的選項(xiàng)的值。

下面是一個(gè)示例代碼：

<select id="my-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<div id="output"></div>
<script>
const select = document.getElementById('my-select');
const output = document.getElementById('output');
// 添加 change 事件監(jiān)聽器
select.addEventListener('change', event => {
  // 獲取當(dāng)前選中的選項(xiàng)的值
  const selectedValue = event.target.value;
  // 根據(jù)選項(xiàng)的值執(zhí)行不同的操作
  if (selectedValue === 'option1') {
    output.textContent = 'You selected option 1';
  } else if (selectedValue === 'option2') {
    output.textContent = 'You selected option 2';
  } else if (selectedValue === 'option3') {
    output.textContent = 'You selected option 3';
  } else {
    output.textContent = 'Unknown option';
  }
});
</script>

在上面的代碼中，我們使用 document.getElementById 方法獲取了 select 元素和一個(gè)用于輸出結(jié)果的 div 元素。然后，我們使用 addEventListener 方法在 select 元素上添加了一個(gè) change 事件監(jiān)聽器，當(dāng)用戶選擇不同的選項(xiàng)時(shí)，就會(huì)觸發(fā)這個(gè)事件監(jiān)聽器。

在事件監(jiān)聽器中，我們使用 event.target 屬性獲取了觸發(fā)事件的 select 元素，并使用 select.value 屬性獲取了當(dāng)前選中的選項(xiàng)的值。根據(jù)選項(xiàng)的值，我們執(zhí)行不同的操作，將結(jié)果輸出到 output 元素中。

如何在select最開始時(shí)未選擇時(shí)就展現(xiàn)出第一個(gè)元素的界面呢

當(dāng) select 元素沒有選中任何選項(xiàng)時(shí)，它將顯示一個(gè)默認(rèn)的占位符，通常是第一個(gè)選項(xiàng)。如果你想要在 select 元素加載時(shí)就顯示第一個(gè)選項(xiàng)的內(nèi)容，可以在 HTML 中將該選項(xiàng)設(shè)置為 selected。例如：

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

在上面的代碼中，我們將第一個(gè)選項(xiàng)設(shè)置為 selected，這意味著在 select 元素加載時(shí)，它將顯示第一個(gè)選項(xiàng)的內(nèi)容。

如果你是在使用 JavaScript 動(dòng)態(tài)生成 select 元素，則可以使用 option.selected 屬性將第一個(gè)選項(xiàng)設(shè)置為選中狀態(tài)。例如：

js

const select = document.createElement('select');
// 添加選項(xiàng)
const option1 = document.createElement('option');
option1.value = '1';
option1.text = 'Option 1';
select.appendChild(option1);
const option2 = document.createElement('option');
option2.value = '2';
option2.text = 'Option 2';
select.appendChild(option2);
const option3 = document.createElement('option');
option3.value = '3';
option3.text = 'Option 3';
select.appendChild(option3);
// 將第一個(gè)選項(xiàng)設(shè)置為選中狀態(tài)
select.options[0].selected = true;
// 將 select 元素添加到頁面中
document.body.appendChild(select);

在上面的代碼中，我們使用 select.options[0].selected = true 將第一個(gè)選項(xiàng)設(shè)置為選中狀態(tài)，然后將 select 元素添加到頁面中。這將確保在 select 元素加載時(shí)，它將顯示第一個(gè)選項(xiàng)的內(nèi)容。