当我的主选择使用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

您将需要创建一个控制器操作，该操作将从第一个列表中获取一个值，并为第二个列表提供一个选项列表。然后，您可以使用Java框架（例如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
    }
  });
});