JQuery 当用户从下拉列表中重新选择另一个值时重置该值

Question

我有 2 个输入字段（下拉列表），我需要用户从每个下拉列表中选择一个值以便处理数据。

我的jQuery代码：

$(function () {
   $("#firstDropdown").on("change", function () {
       var firstValue = $("#firstDropdown").val();
           $("#secondDropdown").on("change", function () {
                var secondValue = $("#secondDropdown").val();

                //some code that sends firstValue and secondValue to a class to be processed
           });
           alert(secondValue);
           return;
    });
    alert(firstValue);
    return;
});

在用户第一次从下拉列表中选择值的第一次尝试中，它工作正常。

如果用户决定从第一个下拉列表 (#firstDropdown) 中重新选择另一个值，就会出现问题。然后 firstValue 的值没有改变，它仍然是第一个选择的（在接收此数据的 class 中进行调试）。这是因为将数据发送到后端的代码 class 位于与第二个下拉列表的更改相关的函数中。

有什么方法可以重置第一个下拉菜单的重选值吗？

Answer 1

    $(document).ready(()=>{
        $("#firstDropdown, #secondDropdown").on("change", function () {
            //this.firstValue = $('#firstDropdown :selected').text();               
            var firstValue = $('#firstDropdown').val();              
            vat secondValue = $('#secondDropdown :selected').text();
                
            console.log('firstValue' + firstValue);
            console.log('secondValue' + secondValue);               
        });
    });

你这里有一些例子

Answer 2

您的代码

$("#firstDropdown").on("change", function () {
   var firstValue = $("#firstDropdown").val();
   $("#secondDropdown").on("change", function () {

表示第二个事件处理程序只会在第一个 select 第一次更改时触发。因此您的用户必须更改 first 然后 second。此外，如果您的用户第一次更改不止一次，那么您将在第二次更改多个事件处理程序，可能会创建重复记录。

这可能是您的“然后 firstValue 的值未更改”的原因，其中第二次更改第二个值将触发 firstValue，因为它是第一个，然后第二次使用现在的第一个值 - 但你可能正在做一些事情（不是在提供的代码中）来停止第二次调用所以看不到它。

您可以通过$("#secondDropdown").off("change").on("change"...解决这个问题以确保只有一个处理程序，但这有点麻烦！

相反，预先定义您的事件处理程序，然后检查它们是否适合运行。

您可以在选择器中使用 , 将单个事件处理程序应用于多个元素：

$("#firstDropdown, #secondDropdown").on("change",

然后，在事件处理程序中，检查两个值是否都有值

var firstValue = $("#firstDropdown").val();
var secondValue = $("#secondDropdown").val();
if (firstValue !== "" && secondValue !== "") 
  //some code that sends firstValue and secondValue to a class to be processed

这个假设（问题中没有提供）有一个空值的默认选项，例如：

<select id="firstDropdown">
   <option value="">Please select</option>

JQuery 当用户从下拉列表中重新选择另一个值时重置该值

JQuery reset the value when the user reselects another value from the dropdown

jquery

onchange