<Select>の内容を外部入力に基づいて変更します

Question

図のように2つの選択タイプがあるとします。私の質問は、最初の入力からの入力に基づいて選択タイプの内容を変更する方法です。

Answer 1

単に選択/入力制御ののonchange（）方法でAJAXメソッドを呼び出して、ページのリフレッシュなしで相互にデータをロードします。

Answer 2

ここで私はあなたにもjQueryのライブラリChained Selects

https://www.appelsiini.net/projects/chained

を使用することができますjqueryのコードの下に

$(document).ready(function(){ 
    $("#partFamily").on("change",function(){ 
    if($("#partFamily").val() != '') 
    { 
     $.ajax({ 
      url: "your url", 
      data: { partFamilyId: $("#partFamily").val() }, 
      method: "GET", 
      success: function (data) { 
       $("#FamilyType").html(""); // clear before appending new list 
       $.each(data, function (i, value) { 
        $("#FamilyType").append(
         $('<option></option>').val(value.Id).html(value.Name)); 
       }); 
      } 
     }); 
    } 
    else 
    { 
     $("#FamilyType").html(""); 
    } 
    }); 

}); 

Answer 3

を試してみて、2つの選択要素

ため#partFamilyと#FamilyType idを検討しています2番目のSelectにすべての選択肢をロードする必要があります。選択したものからフィルタリングされます。 （サーバーへのリクエストはありません）