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');
}

Answer 2

也许尝试循环遍历选择元素的孩子寻找默认值？

var pagestatsObject = {};

var dnsValues = [];
for(var i=0; i<bardata.length; i++){
    var dnsItem = bardata[i].aggs.dns.avg;
    dnsValues.push([i, dnsItem]);
}


var connectValues = [];
for(var i=0; i<bardata.length; i++){
    var connectItem = bardata[i].aggs.con.avg;
    connectValues.push([i, connectItem]);
}


var SSLValues = [];
for(var i=0; i<bardata.length; i++){
    var SSLItem = bardata[i].aggs.ssl.avg;
    SSLValues.push([i, SSLItem]);
}


var sendValues = [];
for(var i=0; i<bardata.length; i++){
    var sendItem = bardata[i].aggs.snd.avg;
    sendValues.push([i, sendItem]);
}


var serverBusyValues = [];
for(var i=0; i<bardata.length; i++){
    var serverBusyItem = bardata[i].aggs.srvbsy.avg;
    serverBusyValues.push([i, serverBusyItem]);
}


var receiveValues = [];
for(var i=0; i<bardata.length; i++){
    var receiveItem = bardata[i].aggs.rcv.avg;
    receiveValues.push([i, receiveItem]);
}


pagestatsObject = [ 
    {"key" : "DNS", "values" : dnsValues}, 
    {"key" : "Connect", "values" : connectValues},
    {"key" : "SSL", "values" : SSLValues},
    {"key" : "Send", "values" : sendValues},
    {"key" : "Server Busy", "values" : serverBusyValues},
    {"key" : "Receive", "values" : receiveValues}
];

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);
    }
  }
};

Answer 3

您可以标记添加特定数据标记的newests选项，即data-toreset。然后，当您需要重置时，仅删除具有该标记的选项。

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

3 个答案: