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

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

<强> HTML：

<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>

<强> JS：

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

Answer 2

这是一个逻辑问题。

如果他们不在通过ajax收到的数组中，我很确定你要从汽车中删除<options>（第3个下拉列表）。

您在比较中使用<select>值，而不是每个<option>值。
你加倍for循环会导致一些错误 break将在第一场比赛中结束循环，而不是全部删除。
我没有得到您尝试通过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>

当第二次ajax结果来时，我想将下拉重置为原始

2 个答案: