jquery - 選択オプションがリセットされず、jquery を介して正しくバインドされない

Question

この選択オプション（）に従って、1つの選択オプション（）をバインドしたい。これは、国を拘束し、国ごとに拘束するのと似ています。最近、sGroup を適切にバインドする際に問題が発生しています。これは、bind add extra empty 中に optionb を選択します。これに加えて、MasterGroup で選択が変更されたときにこれをリセットする方法がわかりません。

これが私のコードです

$(function()
{
$('.MainGroupselect').change(function()
 {
  var id=$(".MainGroupselect").val();
  callsubgroup(id);
  });

  function callsubgroup(id)
  {
  $("#loading").css("display","block");
        $.ajax
        ({ 
          cache: false, 
          type: "POST", 
          url: 'User/asrs.aspx/GetSubGroup',
          data: '{id: ' + id + '}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: bindlist, 
          error: function (xhr){alert('Error occured');} 
        });
}

function bindlist(data)
{
           $("#sGroup").css("display","block");
            var xmlDoc = $.parseXML(data.d);
                var xml = $(xmlDoc);
                var subgroup = xml.find("SubGroup");
                subgroup.each(function () {
                var subgroup = $(this);
                 var option = $("#sGroup option").eq(0).clone(true); 
                       var vid=subgroup.find("SGroupID").text();
                       var vtitl=subgroup.find("SGroupTitle").text();
                        option='<option value='+vid+'>'+vtitl+'<option>';
                   $("#sGroup").append(option); 


                    }); 
  $("#loading").css("display","none");

}

});

HTML 部分

<select name="MainGroupselect" id="MainGroupselect" class="MainGroupselect">
<option value="1">America</option>
<option value="1">China</option>
<option value="1">Europe</option>
<option value="1">India</option>
</select>
  <select name="sGroup" id="sGroup" style="display:none"></select>