选择选项不重置，不通过jquery正确绑定

Question

我想根据这个select选项（）绑定一个select选项（）。 它类似于绑定国家，然后根据国家绑定它的状态。 最近我遇到了正确绑定 sGroup 的问题。在绑定期间，此选择选项b添加额外的空。除此之外，我在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>