I want dropdown reset to original when second time ajax result come

Question

On change of type and category, department should be changed.

It works for one time, but when I change category and type a second time without refresh, it does not works.
I don't want to refresh page for second time or much more time.

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

$('#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

That is a logic issue.

I'm pretty sure that you want to remove the <options> from the cars (3rd dropdown) if they're not in the array received via ajax.

1. You use the <select> value, in the comparison, instead of each <option> value.
   
2. You double for loop just can lead to some errors.
   The break will end the looping on first match, instead of removing them all.
3. I don't get what you try to acheive with the if(id !=null && select !=null){ comparison, which is always TRUE.

So I fixed your code using only one for loop and .indexOf() to check if the option value is in array.

I made some replacements in your code and commented them.
But I completely removed you double loop.
Here is a CodePen with all console logs showing.

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>

Answer 2

I have modified your code and separated the function bound to the change events of the CATEGORY_ID and UF_TYPE dropdowns. Moreover, I have created a separate function to handle updation of department dropdown options. Below id the modified code:

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