2 дропбокса ajax

Question

Добрый день люди,

На этой неделе я впервые начал работать с ajax-запросом, но понятия не имею, как правильно его использовать. Моя ситуация: у меня есть 2 дропбокса, первый содержит данные из базы данных, второй должен быть заполнен опцией, которую я выбрал в первом комбинированном списке (например, select * from presents where city = '$_GET['city']').

У меня есть следующий код:

из заголовочного раздела index.php

    $('#woonplaats').change(function(){
        var woonplaats = $('#woonplaats').val();

        $.ajax({ 
        type: "GET", 
        url: "ajax.php?woonplaats="+woonplaats+"", 
        success: function(msg){
            $('#pandtype').html(msg);}
        });
    });

от ajax.php

$_GET['woonplaats'] = mysql_real_escape_string($_GET['woonplaats']);

if(isset($_GET['woonplaats']))
{ 
    $query = "SELECT * FROM aanbod WHERE Plaats = '".$_GET['woonplaats']."'";
    $result = mysql_query($query);
    echo $query;

    echo "<select id='pandtype' name='pandtype'>";
    while($row = mysql_fetch_object($result))
    { 
        echo '<option value="'.ucfirst(strtolower($row->PandType)).'">'.ucfirst(strtolower($row->PandType)).'</option>';
    }
    echo "</select>";
}

Что мне не хватает? И что мне делать с оригинальным 2-ым загруженным списком?

С уважением!

Answer 1

Использование jquery

*** в заголовке

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
            $('#states').change(function(){
                $('#cities').load('places.php?state='+$('#states').val() );
        $('#cities').focus();
            });
        });
</script>

** Комбинированные состояния

<select name="states" id="states" onChange="" width="200px" style="width: 200px">
        <option value="">Select state</option>
        <?php
        $query_uf =  "SELECT * FROM states ORDER BY state ASC";
        $result = mysql_query($query_uf, $bd);
        while ($uf = mysql_fetch_assoc($result)) {
            echo "<option value='".$uf['cod']."'>".$uf['name_state']."</option>";
        }
?>
</select>

** комбинированные города (заполняется при изменении штатов)

<select name="cities" id="cities" width="200px" style="width: 200px">
        <option value="">Choose a city</option>
      </select>

places.php

$id_state = $_GET['state'];
$result = mysql_query("SELECT * FROM cities WHERE cod_st = '".$id_state."' ORDER BY name_city ASC", $bd) or die(mysql_error());
echo "<option value=\"\">Select city.</option>";
while($row = mysql_fetch_array($result) ){
    echo "<option value='".$row['cod_city']."'>".$row['name_city']."</option>";
}

Таблица состояний треска | name_State

---

1 | Флорида 2 | California

Таблица городов cod_city | имя_город | cod_st

---

1 | Майами | 1 2 | Орландо | 1 3 | Сан-Диего | 2 4 | Сан-Франциско | 2

Answer 2

В ответ на ответ, который я получил, я могу предложить небольшой рефакторинг -

Вместо создания элемента-заполнителя и использования метода jQuery .html ():

$('#blaat').html(msg);

Вы можете динамически создать элемент, который вы хотите, чтобы ваш ответ ajax отображался в ...

Чтобы показать после того, как элемент создал ajax-запрос (скажем, это был #woonplaats):

$('<div>' + msg + '</div>').appendTo($('#woonplaats'));

Я предпочитаю этот метод, потому что, в зависимости от унаследованных правил CSS, вы можете получить немного «вонючек» на дисплее. Это немного больше содержимого в настройках скрипта, но может предотвратить необходимость добавления другого класса CSS или встроенного стиля для «display: none» в элементе.