2回目のajaxの結果が来たときに元にドロップダウンリセットしたい

Question

タイプとカテゴリが変更されたら、部門を変更する必要があります。

これは一度しか動作しませんが、カテゴリを変更してリフレッシュせずにもう一度タイプすると動作しません。
2回目以降はページを更新したくありません。ここ

<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

ロジックの問題です。

ajaxで受け取った配列にない場合は、<options>を車（3番目のドロップダウン）から削除したいと思います。

1. <option>値の代わりに、<select>の値を使用します。
   
2. ダブルforループは多少の誤差を生じることがあります。
   breakは、すべてを削除するのではなく、最初の試合でループを終了します。
3. if(id !=null && select !=null){の比較では、あなたが達成しようとしているものは得られません。これは常にTRUEです。

だから私はoption配列に値があるかどうかを確認するために一つだけforループと.indexOf()を使用してコードを修正しました。

あなたのコードでいくつかの置換えを行い、コメントしました。
しかし、私は完全にダブルループを削除しました。
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>

Answer 2

私はあなたのコードを修正し、CATEGORY_IDとUF_TYPEドロップダウンのchangeイベントにバインドされた機能を分離しています。さらに、私は、部門のドロップダウンオプションの更新を扱う別の関数を作成しました。 IDの下に変更したコード：

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