将动态下拉菜单重置回初始状态

Reset a dynamic dropdown back to initial state

本文关键字：初始状态动态下拉菜单更新时间：2023-09-26

我有一个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();
}

这似乎能奏效:

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

也许尝试遍历select元素的子元素寻找默认值?

var reset_select_box = function(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);
    }
  }
};

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <select id="test">
      <option value="">Default</option>
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
      <option value="5">option 5</option>
    </select>
    <button type="button" onclick="reset_select_box('#test');">Reset</button>
  </body>
</html>

您可以添加一个特定的数据标记来标记最新的选项，即data-toreset。然后，当需要重置时，只删除带有该标记的选项。