数据结构
网络
关系数据库管理系统 (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+ 次浏览
