Jquery 与 SMARTY 和 JSON

Question

表部门(department_id, name) 表类别(category_id，department_id，name)

我想实现这样的想法:当我在下拉列表中更改部门时，所有类别都会根据部门值进行更改

这是我的 jquery 脚本

{literal}
<script type="text/javascript">
$(document).ready(function(){
  $('#department').change( function() {
    var departmentVal = $(this).val();
    $("#category option").remove();
    $.getJSON("ajax.php",{departmentId: $(this).val(), dataType: "json", ajax: 'true'},
      function(j){
        var options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].category_id + '">' + j[i].name + '</option>';
           }
         $("#category").html(options);  
    })
  });
});
</script>
{/literal}

我想知道如何在 ajax.php 文件中实现 Ajax 类的代码 返回 json

我以前也这样做过，但没有发生任何事情，因为我不使用类

$category= array();
while($grab = $db->fetch_array($result)) {
  $category[] = array('optionValue' => $grab['category_id'], 'optionDisplay' => $grab['name']);
}
echo json_encode($category);

现在我想使用带有 PDO 的类来实现这个想法，请帮助我

Answer 1

我可以帮助您了解概念和算法:

1. 显示部门下拉列表并添加 jquery 来处理更改事件。
2. 仅加载类别的 JSON 数据很好，但有时在 IE 和 safari 中不起作用。一种可靠的方法是使用 AJAX 加载完整的select，然后替换现有的类别下拉列表。

jQuery(function($){
  $('#department').change( function() {
    var departmentVal = $(this).val();
    var cat_parent =  $("#category").parent();
    cat_parent.html("Loading...");
    $.get("category_select.php",
          {departmentId: departmentVal},
          function(data){
            cat_parent.html(data);
          })
  });
});

category_select.php will need to return data with format:

<select id="category">
  <option>...</option>
</select>

确保将类别选择放在没有其他子级的父级中:

<span>
  <select id="category">
    <option>Select a department first</option>
  </select>
</span>

此方法适用于最新的 IE、Safari、Google Chrome 和 Firefox。