Reset Select box values using jQuery

Question

I have three select boxes. When I select first select box,it automatically loads options of second and third select box using jQuery and AJAX (values from database).

But when I change the option of second select box,it should list the third select box values based on second select box option.But now I am getting select box options for third as per first option.

$(document).ready(function() { $("#cat").change(function() { var pc_id = $(this).val(); if(pc_id != '') { $.ajax ({ type: "POST", url: "load_sub_cats.php", data: "catid="+ pc_id, success: function(option) { $("#subcat").html(option); } }); } else { $("#subcat").html("<option value=''>-- No category selected --</option>"); } if(pc_id != '') { $.ajax ({ type: "POST", url: "load_qset.php", data: "catid="+ pc_id, success: function(option) { $("#questionset").html(option); } }); } else { $("#questionset").html("<option value=''>-- No question set selected--</option>"); } return false; }); $("#subcat").change(function() { var pc_id = $(this).val(); //$("#questionset").html("<option value=''>-- Select Question set --</option>"); $("#questionset").empty(); if(pc_id != '') { $.ajax ({ type: "POST", url: "load_subcat_qset.php", data: "subcatid="+ pc_id, success: function(option) { $("#questionset").html(option); } }); } else { $("#questionset").html("<option value=''>-- No question set selected --</option>"); } return false; }); });`

I have used empty() to empty the select box. But it doesn't reset the value.

Community · Accepted Answer · 2017-05-23 12:17:14Z

1

Instead of empty(), try something like this:

$('#questionset') .find('option') .remove() .end() .append('<option value="whatever">text</option>') .val('whatever') ;

See this post for more details

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Aug 8, 2013 at 13:30

lehn0058

20.4k16 gold badges74 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rekha Over a year ago

Thanks for your reply.I have used Ajax to reset values.Can I use the ajax value in append

lehn0058 Over a year ago

Yes, as long as the ajax value is the html you want.

Rekha Over a year ago

remove() and empty is removing options but not appending new options

lehn0058 Over a year ago

Hmmm... perhaps it would be easier to create a whole new html selector from your ajax results and hide/remove the old html selector instead of trying to reassign it's contents?

Collectives™ on Stack Overflow

Reset Select box values using jQuery

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related