如何傳遞參數 onChange 的 html select

問題描述

我是 JavaScript 和 jQuery 的新手。我想顯示一個 combobox-A，它是一個 HTML <select>，其選定的 id 和其他位置在 onChange() 上。

如何通過其選擇的 id 傳遞完整的組合框，以及如何傳遞 onChange 事件的其他參數？

最佳解決方案

function getComboA(selectObject) {
    var value = selectObject.value;
}

<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

上面的例子可以顯示 OnChange 事件上組合框的選定值。

次佳解決方案

在 jQuery 中如何做：

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

你也應該知道 Javascript 和 jQuery 不一樣。 jQuery 是有效的 JavaScript 代碼，但並不是所有的 JavaScript 都是 jQuery 。您應該查找差異，並確保使用適當的差異。

第三種解決方案

在某些情況下可以使用另一種方法，將所選 OPTION 的值直接傳遞給如下功能：

<SELECT onChange="myFunction(this.options[this.selectedIndex].value)">
  <OPTION value="1">Text 1</OPTION>
  <OPTION value="2">Text 2</OPTION>
</SELECT>

希望它有助於某人。

第四種方案

jQuery 解決方案

How do I get the text value of a selected option

選擇元素通常有兩個要訪問的值。首先要發送給服務器的值很簡單：

$( "#myselect" ).val();
// => 1

第二個是選擇的文本值。例如，使用以下選擇框：

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

如果您想要獲取字符串”Mr”(如果選擇了第一個選項)(而不是僅僅是”1″)，則可以按以下方式進行：

$( "#myselect option:selected" ).text();
// => "Mr"

也可以看看

.val() jQuery API Documentation

第五種方案

我發現 @ Piyush 的答案有幫助，只是為了添加它，如果你編程創建一個選擇，那麼有一個重要的方式來獲得這個行為可能不是很明顯。假設你有一個功能，你創建一個新的選擇：

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

正常的行為可能就是説

newSelect.onchange = changeitem;

但是，這並不能讓您指定參數傳入，所以您可以這樣做：

newSelect.setAttribute('onchange', 'changeitem(this)');

您可以設置參數。如果你這樣做的第一種方式，那麼你會得到你的 onchange 功能的參數將依賴於瀏覽器。第二種方式似乎工作 cross-browser 很好。

第六種方案

你可以嘗試下面的代碼

<select onchange="myfunction($(this).val())" id="myId">
    </select>

參考文獻

How to pass parameters on onChange of html select

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何傳遞參數 onChange 的 html select