javascript - 将动态下拉列表重置回初始状态

Question

我有一个ajax动态下拉表单，onchange根据第一个选择更改第二个下拉列表。但是，如果有人重置表单，除了动态元素之外的所有元素都会被清除。

我做了一个重置​​按钮功能，它的作用是:$('#myForm')[0].reset();

但是它不会重置动态下拉列表。

然后我添加了$('#state').prop('selectedIndex',0);然后才选择初始子项。

本质上我希望它恢复到默认值 <option value="">State/Province</option>状态在变得动态之前就已经存在，我不知道如何准确地做到这一点。

我是非常非常新的人，使用以前的问题和谷歌甚至让我走到了这一步。

谢谢

更新: 这就是我需要重置的内容:

<select name="state" class="dropdown" id="state">
    <option value="">State/Province</option>
    <!-- this is populated by ajax -->
</select>

此表单更改了上述内容:

<select name="country" class="dropdown" id="country" onchange="getStates();">
        <option value="">Select Country</option>
       <?php 
            $con = mysql_connect($db_host, $db_user, $db_pass); 
           if (!$con) 
         {
            die('Could not connect: ' . mysql_error());
         }

         mysql_select_db('earth');
         $query = "select id,country from regions order by country";
         $result = mysql_query($query);

         while ( $row = mysql_fetch_object( $result ) )              
         { 
      ?>
    <option value=<?php echo $row->id; ?>><?php echo $row->country;?>    </option>
    <?php } 
      mysql_free_result($result);
      ?>
  </select>

附加代码:

function getStates()
{
   $('#state').html('');
   var e = document.getElementById("country");
   var countryID = e.options[e.selectedIndex].value;
   $.ajax({
        type: "POST",
        url: "getStates.php",
        data: {countryID:countryID},
        dataType:'json',
        //success: function(result){
        success: function(data){   
         var toAppend = '';
            $.each(data,function(i,o){
                toAppend += '<option value=' +o.id + '>' + o.name +    '</option>';
            });

            $('#state').append(toAppend);       
        },  
 });
}

 function reset_select_box(selector, default_value)
 {
  if(typeof default_value !== 'string') default_value = "";
  var  select_box = $(document).find(selector),
   children = select_box.children();
   console.log(children);
   for(var i in children){
     if(children[i].value === ""){
      select_box.prop('selectedIndex', i);
    }
 } 
};

function resetForm()
{
   // since the form is dynamic, reset form does not reset the states
   $('#frmSigGen')[0].reset();
}

Answer 1

这似乎可以解决问题:

function resetForm()
{
    $('#frmSigGen')[0].reset();
    $('#state').empty();
    $('#state').append('<option value="">State/Province</option');
}