Jquery + SQL + HTML + Drop Down menu?

Hi guys I really need your help here please. I am very new to jQuery.

I would like to show multi-selection drop down menu from which user can select country->state->city

Please teach me how can I use jQuery to fetch state based on country and then city based on state.

I would show all countries on page so that part is easy.

Now the users selects country how to fetch its states from sql and then city when they select state.

Lastly on post I only need to validate city to make sure that the value I am passing to SQL is correct and it is in the table if not error so I will need to use jQuery to again check that value against the SQL.

Please guys.

Country drop down menu is visible state and city will only show when user makes selection of country or state.

You make a request to the server that gets you the states (cities) for the selected country (state) and with these data you populate the next dropdown.

Thanks buddy but what code should I use jQuery wise to make that call?

This might be outdated code now, hopefully it gives you an idea. It’s from an old forum post where someone wanted something similar:

<div id="auctionid">10</div>
<select name="country" id="first-list">
<option value="1">Select Team</option> // this would be your list of countries
<option value="2">Team 2</option>
<option value="3">Team 3</option>
<option value="4">Team 4</option>
</select>
</br></br></br><div id="subcats">
<select name="state" id="states-list">
<option value='1'>Select State</option>

</select></div>

<script>
  $('#first-list').on('change', function(){
    var country = this.value;  // get the selected country
    $.ajax({
      type: "POST",
      url: "submenu2.php",
      data:'countryid='+country,  // send it to PHP as $_POST['countryid']
      success: function(result){
        $("#states-list").html(result);  // stick the returned HTML into the second drop-down
        }
      });
    });

</script>

Basically it traps a change in selection of the drop-down list, gets the selected value into the country variable, sends it as a $_POST variable to the PHP code, and then populates the second drop-down with the return from that code. That means of course that the PHP code is sending formatted <option> tags.

Hopefully this gives you enough to edit for your own usage.

back in the day these were refered to as ‘dynamic dependant dropdowns’ which might help you searching.

That should be

<br/><br/><br/>

although the / are not required unless you are using XHTML, and <br> should not be used just to add white space - that’s what margin and padding are for.

1 Like

Ah, of all the bits I looked at (and changed to disguise it from the original question) I never noticed those. In my defence, this is code that another poster put up and needed help with, and I just looked at the JS bits. Two of the divs are not needed in this example, either. Presumably the OP can just extract the bits they need.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.