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

问题描述

我有 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 的值不会改变，它仍然是第一个被选中的（在接收这个数据的类中进行调试）。这是因为将数据发送到后端类的代码位于与第二个下拉列表更改相关的函数中。

有没有办法重置第一个下拉菜单的重选值？

解决方法

    $(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);               
        });
    });

这里有一些例子

您的代码

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

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

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

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

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

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

$("#firstDropdown,

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

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

this 假设（问题中未提供）有一个默认选项为空值，例如：

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

jquery onchange onchange