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

【问题标题】：How can I refresh a detail select list when my master select changes using AJAX当我的主选择使用 AJAX 更改时，如何刷新详细选择列表
【发布时间】：2011-08-20 09:01:12
【问题描述】：

我正在寻找一些指示。我有一个带有主题列表的选择列表；

<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，但可以吗？对我的任何建议（起点）将不胜感激。

【问题讨论】：

标签： html asp.net-mvc ajax

【解决方案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
    }
  });
});

【讨论】：

感谢您的出色回答。我会努力实现的。

【解决方案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 和 parent 字段）。当您单击一个列表时，以该列表为父项的项目将显示在其旁边的另一个列表中。

给你。它具有已弃用的功能并且很草率，但是当我了解更多信息时，它现在可以使用。我仍然是初学者，但如果我有时间清理它，我会编辑它。

    <?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>

【讨论】：