Ajaxを使用して一度に2つのドロップダウンを設定する方法

Question

私のデータベース（州と都市）の2つのテーブルから2つのドロップダウンフィールドを作成しています。 Citiesテーブルは各状態にリンクされています。私は両方のテーブルのデータをJsonに変換した。私はAjaxを使用して両方のドロップダウンを選択します。さて、ユーザーが州のドロップダウンから州を選択すると、都市のドロップダウンリストをフィルタリングしたいと思います。私は以下のコードを使用していますが、それはうまく動作しています。ただし、各入力フィールドの後ろに空のオプションフィールドを1つ追加しています。どんな助け？

function State() { 
    $('#statedd1').empty(); 
    $('#statedd1').append("<option value='0'>- Select State -</option>"); 
    $('#citydd1').append("<option value='0'>- Select City -</option>"); 
    $.ajax({ 
     type:"GET", 
     url:"states.php", 
     contentType:"application/json; charset=utf-8", 
     dataType:"json", 
     success: function(data) { 
      $('#statedd1').empty(); 
      $('#statedd1').append("<option value='0'>- Select State -</option>"); 
      $.each(data,function (index, item) { 
       $('#statedd1').append('<option value="'+ item.State_ID +'">'+ item.State_Name +'<option>'); 
      }); 
     },complete: function() {} 
    }); 
} 

function City(State_ID) { 
    $('#citydd1').empty(); 
    $('#citydd1').append("<option>Loading...</option>"); 
    $.ajax({ 
     type:"GET", 
     url:"cities.php?Id="+State_ID, 
     contentType:"application/json; charset=utf-8", 
     dataType:"json", 
     success: function(data) { 
      $('#storedd1').empty(); 
      $('#storedd1').append("<option value='0'>- Select City -</option>"); 
      $.each(data,function (index, item) { 
       $('#citydd1').append('<option value="'+ item.CityID +'">'+ item.CityName +'<option>'); 
      }); 
     },complete: function() {} 
    }); 
} 

$(document).ready(function() { 
     State(); 
     $("#statedd1").change(function() { 
      var State_ID = $("#statedd1").val(); 
      City(State_ID); 
     }); 
    }); 

<p><select id="statedd1"></select></p> 
<br><br> 
<p><select id="citydd1" multiple></select></p> 

Answer 1

私は2番目のオプションのタグ< /オプションで/が欠けていると思う>あなたのappend行