Как обновить раскрывающийся список без обновления страницы?

У меня возникают следующие трудности:

Я извлекаю значение dropdown из mysql, и я хочу, чтобы эта информация отображалась в этом выпадающем списке.

Видеть это:

<select id="location" name="location" class='form-control'> <option value="0">Select location</option> <?php $query = mysql_query("select cityname from city"); while($row = mysql_fetch_assoc($query)) { echo '<option value="'.$row['cityname'].'">'.$row['cityname']. '</option>'; } ?> </select> 

Используя этот код, я заполняю значения из базы данных в раскрывающийся список, но для этого мне нужно обновить страницу для значений, которые будут отображаться.

Спасибо.

Использовать jQuery Ajax

yourfile.php

 <select id="location" onchange="getState(this.value)" name="location" class='form-control'> <option value="0">Select location</option> <?php $query = mysql_query("select * from city"); while($row = mysql_fetch_assoc($query)) { echo '<option value="'.$row['cityid'].'">'.$row['cityname']. '</option>'; } ?> </select> <select id="state"> </select> 

Скрипт JQuery

 function getState(city_id) { var html = $.ajax({ type: "POST", url: "path/to/ajax/my_ajax.php", data: "city_id=" +city_id, async: false }).responseText; if(html){ $("#state").html(html); } } 

ajax.php

 $query = mysql_query("select * from state where city_id=".$_REQUEST['city_id']); while($row = mysql_fetch_assoc($query)) { echo '<option value="'.$row['state_id'].'">'.$row['state_name']. '</option>'; }