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.

score 1 · Answer 1 · edited May 23 '17 at 12:17

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 '17 at 12:17

Community

1
1

answered Aug 08 '13 at 13:30

lehn0058

19,977
15
69
109

Thanks for your reply.I have used Ajax to reset values.Can I use the ajax value in append – Rekha Aug 08 '13 at 13:55
Yes, as long as the ajax value is the html you want. – lehn0058 Aug 08 '13 at 14:14
remove() and empty is removing options but not appending new options – Rekha Aug 08 '13 at 15:57
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? – lehn0058 Aug 08 '13 at 16:21

Reset Select box values using jQuery

1 Answers1