在 JavaScript 中使用 Onchange 建立下拉選單

Tahseen Tauseef 2023年12月11日
  1. JavaScript 中的函式
  2. JavaScript 中的函式定義
  3. JavaScript 中的 onchange 函式
  4. 在 JavaScript 中使用 onchange 函式建立下拉選單
在 JavaScript 中使用 Onchange 建立下拉選單

在本文中,將詳細討論以下概念。

  1. JavaScript 中的函式是什麼?
  2. 什麼是 onchange 函式及其在 JavaScript 中的用途?
  3. 使用 JavaScript 中的 onchange 函式建立一個下拉選單。

JavaScript 中的函式

在 JavaScript 中,函式是最基本的構建元件之一。函式類似於執行任務或計算值的過程。

儘管如此,一個程序必須接受一些輸入並提供一個帶有一些明顯連結的輸出才能成為一個函式,並且輸入和輸出之間必須存在關係。因此,在使用它之前,你必須在要呼叫的範圍內的某個位置宣告一個函式。

JavaScript 中的函式定義

它也被稱為函式宣告。函式定義遵循 function 關鍵字。

下面的示例顯示在函式宣告中啟動了 function 關鍵字。

函式宣告包含作為函式名稱的 function 關鍵字、函式引數列表(以逗號分隔並括在括號中)以及函式的 JavaScript 語句(包含在大括號 {...} 中)。

function square(x) {
  return x * x;
}

square 函式只有一個引數 x。該函式包含一行,宣告返回函式的引數 x 乘以自身。

返回的語句指定函式返回的值。

return x * x;

因為引數是按值有效地提供給函式的,所以如果函式體中的程式碼將不同的值分配給給函式的引數,則該更改不會全域性反映或反映在稱為函式的程式碼中。

JavaScript 中的 onchange 函式

JavaScript 中的 onchange 事件是一個重要的事件,用於處理在事件執行期間發生的事件變化。當執行事件時值的狀態發生變化時,會完全觸發 onchange 事件。

onchange 事件與 oninput 事件非常相似,不同之處在於 oninput 事件會立即發生,並且值更改同樣相對較快。儘管如此,onchange 事件本質上是在事件的值失去其執行焦點時發生的。

object.onchange = function() {
  BlocTAK
};

當焦點改變時,呼叫 onchange 函式的物件,然後執行 BlocTAK 來操作和修改值狀態或改變和轉換事件。

<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

Enter something: <input   onchange="myFunction(this.value)">

<script>
function myFunction(val) {
  alert(" The new value is: " + val);
}
</script>

</body>
</html>

你可以在此連結中找到上述程式碼。下面使用示例 Hello World 附上上述程式碼的螢幕截圖。

下拉選單

在 JavaScript 中使用 onchange 函式建立下拉選單

這裡 onchange 函式用作事件偵聽器。

<select name="type" onmousedown="this.value='';" onchange="jsFunction(this.value);">
  <option value='1 lac'>Toyota</option>
  <option value='2 lac'>Kia</option>
  <option value='3 lac'>Honda</option>
  <option value='4 lac'>Suzuki</option>
  <option value='5 lac'>Lamborghini</option>

</select>

這裡的 onchange 函式是用 jsFunction(this.value); 宣告的。

上述 HTML 程式碼的 JavaScript 外部檔案如下。

function jsFunction(value) {
  alert(value);
}

你可以從此連結中看到上述程式碼中的 onchange 函式處理的工作。

因此,在上面的文章中,對函式以及如何在 JavaScript 中宣告它們進行了詳細的說明。然後詳細介紹了有關 onchange 函式的資訊、它的作用以及如何在 HTML 和 JavaScript 中宣告它。

然後在下拉選單中使用 onchange 功能,使下拉選單對使用者更方便。JavaScript 中的 onchange 函式至關重要,因為它允許使用者使用輸入更改然後驗證值,以交叉檢查所提供輸入的值轉換。

它與 JavaScript 中的 oninput 函式協同工作。

相關文章 - JavaScript Onchange