javascript - 当第二次ajax结果出现时，我想将下拉菜单重置为原始

Question

随着类型和类别的改变，部门应该改变。

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

<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]);
  }
}

Answer 1

这是一个逻辑问题。

我很确定你想删除 <options>来自汽车(第 3 个下拉列表)，如果它们不在通过 ajax 接收的数组中。

1. 您使用 <select>值，在比较中，而不是每个 <option>值。
   
2. 你双for循环只会导致一些错误。
   break将在第一个匹配项结束循环，而不是将它们全部删除。
3. 我不明白你想用 if(id !=null && select !=null){ 达到什么目的比较，总是TRUE .

所以我只用一个 for 修复了你的代码循环和 .indexOf()检查是否 option值在数组中。

我在你的代码中做了一些替换并注释了它们。
但是我完全去掉了你的双循环。
这是一个CodePen显示所有控制台日志。

console.clear();    

$('#CATEGORY_ID, #UF_TYPE').on('change', function() {
  var id = $('#CATEGORY_ID').val();
  var select = $('#UF_TYPE').val();

  //console.log(id+" "+select);

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

    //Simulating Ajax response.
    console.log("Ajax request!")
    removeOptions('["21","23","24"]');  // I guess you receive your array as a string.
  }
});


function removeOptions(msg) {

  //var cars = document.getElementsByName("UF_DEPT")[0];  // You have the <select> tag here.
  var cars = $("#UF_DEPT option");  // You have all <option> here.
  //console.log(cars.length);

  //console.log(msg);
  var val = JSON.parse(msg);  // Parse the string to get an array.
  //console.log(val);


  for(i=0; i<cars.length; i++) {
    //console.log(i);
    //console.log( cars.eq(i).attr("value") );

    if( val.indexOf(cars.eq(i).attr("value")) == -1){
      console.log("Hide "+cars.eq(i).val()+" - "+cars.eq(i).text()+" is not in the array.");
      cars.eq(i).hide();
    }else{
      console.log("Show "+cars.eq(i).val()+" - "+cars.eq(i).text()+" is in the array.");
      cars.eq(i).show();
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 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 id="UF_DEPT" name=UF_DEPT>
  <option value="21">Volvo</option>
  <option value="22">Saab</option>
  <option value="23">Mercedes</option>
  <option value="24">Audi</option>
</select>