資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用jQuery將選擇的值重置為預設值？
在建立網頁時，開發者可能需要將下拉選單中的選中選項重置為預設值。例如，我們在表單中添加了下拉選單，允許使用者選擇任何選項。一旦使用者提交表單，我們需要使用 JavaScript 或 Jquery 重置下拉選單選項。
在本教程中，我們將學習使用 Jquery 將下拉選單的選中值重置為預設值的幾種方法。
使用 prop() 方法
第一種方法使用 Jquery 的 prop() 方法。它允許我們重置任何屬性的值。在這裡，我們可以重置“selected”屬性的值，以將下拉選單的選中值重置為預設值。
語法
使用者可以按照以下語法使用 prop() 方法，使用 Jquery 將選中值重置為預設值。
$("#id option").prop("selected", function () {
return this.defaultSelected;
});
上述語法中的 prop() 方法將“selected”屬性名作為第一個引數，將回調函式作為第二個引數。回撥函式返回“defaultSelected”值，該值將設定為“selected”屬性的值。
示例 1
在下面的示例中，我們建立了下拉選單並分配了“mySelect”ID。在 reset() 函式中，我們訪問下拉選單並透過傳遞屬性及其值作為引數來執行 prop() 方法。
當用戶點選輸出中的按鈕時，它將執行 reset() 函式並重置下拉選單的選中值。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> prop() method and selected property </i> to reset the selected value to default in the dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "mySelect">
<option value = "1"> One </option>
<option value = "2"> Two </option>
<option value = "3" selected> Three </option>
<option value = "4"> Four </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
$("#mySelect option").prop("selected", function () {
// return defaultSelected property of the option
return this.defaultSelected;
});
}
</script>
</html>
示例 2
在下面的示例中，我們使用 prop() 方法來更改“selectedIndex”屬性的值。它採用基於零的數值。
這裡，我們建立了一個包含不同汽車品牌的下拉選單，預設情況下選中第三個選項。在 reset() 函式中，我們將“selectedIndex”屬性的值更改為 2，以將下拉選單的選中值重置為預設值。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> prop() method and selectedIndex property </i> to reset selected value to default in dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "cars">
<option value="volvo">Volvo</option>
<option value = "saab"> Saab </option>
<option selected value = "mercedes"> Mercedes </option>
<option value = "audi"> Audi </option>
<option value = "bmw"> BMW </option>
<option value = "toyota"> Toyota </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
$("#cars").prop('selectedIndex', 2);
}
</script>
</html>
使用 each() 方法
在這種方法中，我們使用 each() 方法迭代所有選擇選單選項。之後，我們檢查當前選項是否為預設選中，並將其“selected”屬性的值更改為 true。否則，我們將設定為 false。
語法
使用者可以按照以下語法使用 each() 方法將選擇選單的值重置為預設值。
$("#id option").each(function () {
if (this.defaultSelected) {
this.selected = true;
}
});
在上述語法中，我們使用當前選項的“defaultSelected”屬性來檢查當前選項是否已預先選中。如果是，則為當前選項的“selected”屬性設定 true。
示例
在下面的示例中，我們為水果建立了選擇選單。在 reset() 函式中，我們使用 each() 方法從所有選項中查詢選定的選項。如果當前選項預設選中，我們將再次選中它並從函式中返回它。否則，我們將當前選項的“selected”屬性設定為 false。
在輸出中，使用者可以更改下拉選單中的選項值，然後單擊重置按鈕以選擇預設選項值。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> each() method </i> to reset selected value to default in dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "fruits">
<option value = "apple"> Apple </option>
<option selected value = "banana"> Banana </option>
<option value = "orange"> Orange </option>
<option value = "grapes"> Grapes </option>
<option value = "mango"> Mango </option>
<option value = "pineapple"> Pineapple </option>
<option value = "watermelon"> Watermelon </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
// iterate through each option in the dropdown menu
$("#fruits option").each(function () {
// check if the option is the default; if yes, then set selected to true
if (this.defaultSelected) {
this.selected = true;
return;
}
else {
this.selected = false;
}
});
}
</script>
</html>
我們使用了 prop() 和 each() 方法將選擇下拉選單中的選中值重置為預設值。但是，這兩種方法都使用選項的“defaultSelected”屬性來檢查選項是否已預先選中，並據此再次選擇該選項。
15K+ 次瀏覽
