Как я могу обновить список выбора деталей, когда мой мастер выбора изменяется с помощью AJAX

Question

Я ищу несколько указателей.У меня есть один список выбора со списком тем;

<select class="editor-select" id="TopicDescription" style="width: 99%">
  <option value="test1">test01</option>
  <option selected="selected" value="test2" >test02</option>
</select>

и другой список подтем:

<select class="editor-select" id="SubTopicDescription" style="width: 99%">
  <option value="sub1">sub01</option>
  <option value="sub2">sub02</option>
</select>

Когда изменяется первое значение списка, я бы хотел иметь возможность обновитьвторой список выбора.Проблема в том, что я понятия не имею, как это сделать.Я хотел бы использовать AJAX, но возможно ли это?Любые предложения (отправная точка) для меня будет принята с благодарностью.

Answer 1

Я задал похожий вопрос, и он был закрыт, потому что это, по-видимому, дубликат этого. Вот что я спросил Использование PHP / SQL - Как я могу щелкнуть элемент в списке, чтобы отобразить другой список элементов, связанных с выбранным элементом Я использую список ссылок, а не раскрывающийся список.

В любом случае, я получил его с некоторой помощью.

У меня есть 2 таблицы. таблица "list" (которая имеет поля ID и listName) и таблица "listitems" (которая имеет поля id, itemName и родительские поля). Когда вы щелкаете список, элементы, у которых этот список является родительским, отображаются в другом списке рядом с ним.

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

    <?php
require ('./includes/connection.inc.php');

/* AJAX request */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    $query = sprintf('SELECT * FROM listitems WHERE parent=%d',
            mysql_real_escape_string($_REQUEST['parent']));
    $listitems = mysql_query($query)
            or die(mysql_error()); 
    printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
    while($info = mysql_fetch_array( $listitems )) 
    { 
        echo $info['itemName']."<br />";
    }
    exit;
}

/* Normal request */
?>

<div id="lists">
<h3>Lists</h3>
<?php      
$lists = mysql_query("SELECT * FROM lists") 
        or die(mysql_error());
while($info = mysql_fetch_array( $lists )) 
{   
echo '<a href="?parent='.$info['id'].'">'.$info['listName'].'</a><br />';
} 

?>      
</div>  

<div id='listitems'>
<?php 
    $query = sprintf('SELECT * FROM listitems WHERE parent=%d',
            mysql_real_escape_string($_REQUEST['parent']));
    $listitems = mysql_query($query)
            or die(mysql_error()); 
    printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
    while($info = mysql_fetch_array( $listitems )) 
    { 
        echo $info['itemName']."<br />";
    }
?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>jQuery(function($)){
$('#lists').delegate('a', 'click', function(e){
    e.preventDefault();
$('#listitems').load($(this).attr('href'))
  });
}
</script>

Answer 2

Вам нужно будет создать действие контроллера, которое будет принимать значение из первого списка и предоставлять список опций для второго списка.Затем вы можете сделать AJAX-вызов, используя Javascript-фреймворк, такой как JQuery:

$('#TopicDescription').change(function() {
  // make AJAX call to update the second select list
  $.ajax({
    url: "path/to/your/action",
    data: $('#TopicDescription').val(),
    success: function(data){
      // do something to your other dropdown
      // for example if your getting the data back to fill it with from your post method
      $('#SubTopicDescription').html(data); // you get the point
    }
  });
});