CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan Weinraub
Jonathan Weinraub

Reputation: 387

Reset a dynamic dropdown back to initial state

I have an ajax dynamic dropdown form that onchange changes a second dropdown based on the firsts selection. However, if someone were to reset the form, all elements get cleared except for the dynamic one.

I made a reset button function that does: $('#myForm')[0].reset();

However it doesn't reset the dynamic dropdown.

Then I added $('#state').prop('selectedIndex',0); which only then selects the initial subitem.

Essentially I want it to go back to the default <option value="">State/Province</option> state that was there prior to becoming dynamic and I cannot figure out how to exactly to do this.

I am very very new and used previous questions and google to even get me this far.

Thanks

Update: This is what I need reset:

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

This form changes the above:

<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>

Additional code:

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

Upvotes: 0

Views: 4607

Answers (3)

Sebasti&#225;n Guerrero
Sebasti&#225;n Guerrero

Reputation: 1114

You could mark the newests options adding a particular data tag, i.e. data-toreset. Then, when you need to reset, remove only options with that tag.

The newest options:

<option data-toreset="1"></option>

The JQuery script could be like:

$('*[data-toreset="1"]').remove();

And then you could select the first element of your combo.

Upvotes: 0

Jonathan Weinraub
Jonathan Weinraub

Reputation: 387

This seems to do the trick:

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

Upvotes: 2

iam-decoder
iam-decoder

Reputation: 2564

Maybe try looping through the select elements children looking for the default value?

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>

Upvotes: 0

Related Questions