select的change方法傳遞多個參數(shù)的方法詳解

更新時間：2024年02月04日 11:24:16 作者：〔晴【天】o〕

element-ui中的select,checkbox等組件的change方法的回調(diào)函數(shù)只有當前選擇的val,如果想再傳入自定義參數(shù)怎么辦,本文給大家分享select的change方法如何傳遞多個參數(shù),感興趣的朋友一起看看吧

element-ui中select的change方法傳遞多個參數(shù)

element-ui中的select，checkbox等組件的change方法的回調(diào)函數(shù)只有當前選擇的val，如果想再傳入自定義參數(shù)怎么辦？

不能夠傳入自定義的參數(shù)，在進行某些操作時，會比較困難，下面是change方法傳遞多個參數(shù)的方法：

方法一：@change="dataChange($event, args) , $event就是當前選中的值

  <el-select v-model="value" placeholder="請選擇" @change="dataChange($event, 1)>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

方法二：@change="((val)=>{dataChange(val, 123)})，val就是當前選中的值。

補充：

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

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

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

下面是一個示例代碼：

<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 => {
  // 獲取當前選中的選項的值
  const selectedValue = event.target.value;
  // 根據(jù)選項的值執(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 元素和一個用于輸出結果的 div 元素。然后，我們使用 addEventListener 方法在 select 元素上添加了一個 change 事件監(jiān)聽器，當用戶選擇不同的選項時，就會觸發(fā)這個事件監(jiān)聽器。

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

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

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

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

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

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

js

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

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

您可能感興趣的文章: