Javascript 当第二次ajax结果出现时，我希望下拉菜单重置为原始值

在类型和类别发生变化时，应更换部门

它只工作一次，但当我在没有刷新的情况下更改类别并再次键入时，它就不工作了。 我不想第二次或更多次刷新页面

<select id="CATEGORY_ID">
  <option value="21">desc</option>
  <option value="22">short</option>
  <option value="23">medium</option>
  <option value="24">long</option>
</select>

<select class="bx-user-field-enum" name="UF_TYPE">
  <option value="1">comp</option>
  <option value="2">query</option>
  <option value="3">fault</option>
</select>

<select name=UF_DEPT>
  <option value="21">Volvo</option>
  <option value="22">Saab</option>
  <option value="23">Mercedes</option>
  <option value="24">Audi</option>
</select>

JS在此：

$('#CATEGORY_ID,[name=UF_TYPE]').on('change', function() {
  var id = $('#CATEGORY_ID').val();
  var select = $('.bx-user-field-enum').val();

  if(id !=null && select !=null){
    $.ajax({
      type: "POST",
      //dataType: 'json',
      url:"ajax_dept.php",
      data: {
        select: select, id: id
      },
      success: function(msg) {
        removeOptions(msg);
      }
    });
  }
});


function removeOptions(msg) {
  var cars = document.getElementsByName("UF_DEPT")[0];
  var val = JSON.parse(msg);

  for(var i=0; i<=cars.length; i++) {
    var isFound = false;
    for(var j=0;j<=i; j++) {
      if(val[j] == cars[i].value) {
        isFound=true;
          //cars[i].style.color="red";

          cars[i].style.display="block";
          break;
      }
    }
    if(!isFound) {
      cars[i].style.display="none";
    }
    $('[name=UF_DEPT]').val(val[0]);
  }
}

---

我修改了您的代码，并将绑定到CATEGORY_ID和UF_TYPE下拉列表的更改事件的函数分隔开。此外，我还创建了一个单独的函数来处理部门下拉选项的更新。下面是修改后的代码：

HTML:

JS:

这是一个逻辑问题

我很确定，如果不在通过ajax接收的数组中，您希望从cars的第3个下拉列表中删除

在比较中使用值，而不是每个值。 双for循环只会导致一些错误。 中断将在第一场比赛结束循环，而不是将其全部删除。 我不明白你想用ifid做什么=空&选择=空{比较，这总是正确的。 所以我修复了您的代码，只使用了一个for循环和.indexOf来检查选项值是否在数组中

我在你的代码中做了一些替换并对它们进行了注释。 但我完全消除了你的双重循环。 下面是一个示例，其中显示了所有控制台日志

控制台。清除； $'CATEGORY\u ID，UF\u TYPE'。关于'change'，函数{ var id=$'CATEGORY_id'.val； var select=$'UF_TYPE'.val； //console.logid++select； ifid！=null&&select！=null{//此条件始终为真 /* $.ajax{ 类型:POST,， //数据类型：“json”， url:ajax_dept.php， 数据：{ 选择：选择，id:id }, 成功：functionmsg{ 移除选项msg； } }; */ //模拟Ajax响应。 console.logAjax请求！ removeOptions“[21,23,24]”；//我猜您将以字符串形式接收数组。 } }; 函数移除选项msg{ //var cars=document.getElementsByNameUF_DEPT[0]；//这里有标记。 var cars=$UF_DEPT option；//您在这里拥有了所有。 //控制台、logcars、长度； //console.logmsg； var val=JSON.parsemsg；//解析字符串以获取数组。 //console.logval；

---

fori=0；我可以发布一个ajax响应的示例吗？ajax响应为[21,23,24]等部门提供。功能上完全没有变化。OP使用一个处理器处理两个选择器是正确的。这将为一美元改变4个25美分。非常感谢您的回答。这对我来说很有用。

<select id="CATEGORY_ID">
  <option value="21">desc</option>
  <option value="22">short</option>
  <option value="23">medium</option>
  <option value="24">long</option>
</select>

<!-- Note: I have added Id to this select element -->
<select id="UF_TYPE" class="bx-user-field-enum" name="UF_TYPE">
  <option value="1">comp</option>
  <option value="2">query</option>
  <option value="3">fault</option>
</select>

<select name=UF_DEPT>
  <option value="21">Volvo</option>
  <option value="22">Saab</option>
  <option value="23">Mercedes</option>
  <option value="24">Audi</option>
</select>

//A specialized function to update the department options
function update_department_options() 
{
    var id = $('#CATEGORY_ID').val();
    var select = $('#UF_TYPE').val();

    if(id !=null && select !=null) {
        $.ajax({
          type: "POST",
          //dataType: 'json',
          url:"ajax_dept.php",
          data: {
            select: select, id: id
          },
          success: function(msg) {
            removeOptions(msg);
          }
        });
    }
}

$('#UF_TYPE').on('change', function() {
    update_department_options();
});


$('#CATEGORY_ID').on('change', function() {
    update_department_options();
});


function removeOptions(msg) {
  var cars = document.getElementsByName("UF_DEPT")[0];
  var val = JSON.parse(msg);

  for(var i=0; i<=cars.length; i++) {
    var isFound = false;
    for(var j=0;j<=i; j++) {
      if(val[j] == cars[i].value) {
        isFound=true;
          //cars[i].style.color="red";

          cars[i].style.display="block";
          break;
      }
    }
    if(!isFound) {
      cars[i].style.display="none";
    }
    $('[name=UF_DEPT]').val(val[0]);
  }
}