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

您需要创建一个控制器操作，该操作将从第一个列表中获取值，并提供第二个列表的选项列表。然后，您可以使用Javascript框架（例如JQuery：

）进行ajax调用

$('#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
    }
  });
});

Answer 2

我问了一个类似的问题，它被关闭了，因为它显然是一个副本。以下是我的问题Using PHP/SQL - How can I click an item in a list to display another list of items assoicated to the clicked item我使用链接列表而不是下拉选择。

无论如何，我得到了一些帮助。

我有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>

当我的主人使用AJAX选择更改时，如何刷新详细选择列表

2 个答案: