Multiple dropdown with jquery ajax and php

Question

I am following this tutorial - http://www.thesoftwareguy.in/multiple-dropdown-with-jquery-ajax-and-php/

If you have a look at the demo - http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/ the second select appears once the first choice is made. While the third box appears when the second choice is made.

This is the ajax code:

  function showState(sel) {
    var primary_cat = sel.options[sel.selectedIndex].value;
    $("#output1").html("");
    $("#output2").html("");
    if (primary_cat.length > 0) {

        $.ajax({
            type: "POST",
            url: "fetch_state.php",
            data: "primary_cat=" + primary_cat,
            cache: false,
            beforeSend: function() {
                $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {
                $("#output1").html(html);
            }
        });

How can I made the second dropdown menu always appear, rather than appear and dissapear upon choice? I would still the same like it to populate whenever the first choice is made.

I tried eliminating lines

beforeSend: function() {
    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
},

and

success: function(html) {
     $("#output1").html(html);
}

Individually and together but then it does not work.

Excuse my boring question but I'm still learning PHP and AJAX

Marc · Accepted Answer · 2015-08-10 08:46:58Z

1

If you want to show both select tags, you will need to create a default value on the first select, since there have to be options for the second one based on the first one.

So what I would do is:

Remove the <option value="">Please Select</option> in the landing page from the <select name="country" ...>
Add the following code to the <script> where the showState function is defined (but before and outside the function):
```
$(function(){
    $('select[name=country]').trigger('onchange');
});
```

Like this you have a default value on the first select and the second one will always show with the options matching the selection in the first select.

answered Aug 10, 2015 at 8:46

Marc

3,7198 gold badges37 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Multiple dropdown with jquery ajax and php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related