带有 jquery/php/database 的链式选择框不起作用答案

【问题标题】：Chained select boxes with jquery/php/database not working带有 jquery/php/database 的链式选择框不起作用
【发布时间】：2013-08-21 21:50:31
【问题描述】：

似乎大多数链式选择都是用 JSON 完成的，但不幸的是，我使用我的数据库来完成这一点要方便得多。它几乎就在那里，但由于某种原因，第二个选择框没有正确加载。相反，它正在加载它所在页面的整个 HTML，我不知道为什么。

这是我得到的（请注意，make_list() 和 model_list() 是我之前构建的函数，它们返回一个适合其各自标准的数组）

JS：

$(document).ready(function(){
    $("select#type").attr("disabled","disabled");
    $("select#category").change(function(){
        $("select#type").attr("disabled","disabled");
        $("select#type").html("<option>loading...</option>");
        var id = $("select#category option:selected").attr('value');
        $.post("select_type.php", {id:id}, function(data){
            $("select#type").removeAttr("disabled");
            $("select#type").html(data);
        });
    });
    $("form#select_form").submit(function(){
        var cat = $("select#category option:selected").attr('value');
        var type = $("select#type option:selected").attr('value');
        if(cat>0 && type>0)
        {
            var result = $("select#type option:selected").html();
            $("#result").html('your choice: '+result);
        }
        else
        {
            $("#result").html("you must choose two options!");
        }
        return false;
    });
});

HTML/PHP：

<form id="select_form">
  <div class="clearfix">
    <select id="category">
        <option value="">Any</option>
        <?php foreach ( make_list() as $make ) { ?>
          <option value="<?php echo $make ?>"><?php echo $make ?></option>
        <?php } ?>
      </select>
    </div>

    <div class="clearfix">
      <select id="type">
        <option value="">Any</option>
      </select>
  </div>
</form>

当第一个选择被更改时，JQuery 应该查看同一文件夹中名为“select_type.php”的文件。这是该文件中的内容（奇怪的是 $_POST['id'] 似乎也没有附加到该文件中，尽管它是在 JS 中创建的）：

foreach ( model_list($_POST['id']) as $model ) {
    echo '<option value="'.$model.'">'.$model.'</option>';
}

我一直在为这个项目使用这个资源：http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/，它帮助我完成了大部分工作，但不幸的是，数据似乎没有加载到第二个选择框中。

感谢收看！

【问题讨论】：

标签： javascript jquery ajax forms chained

【解决方案1】：

好的，所以我想出了这个。希望这可以帮助将来遇到同样问题的人。

对文件 select_type.php 的调用不正确。调用必须是绝对的而不是相对的。由于我使用的是 wordpress，我只是将这一行更改为：

$.get("<?php echo get_template_directory_uri() . '/includes/select-model.php'; ?>", {id:id}, function(data){

您会注意到我将 $.post 更改为 $.get。我不确定为什么 post 不工作，但 get 似乎工作正常。我只是使用 $_GET['id'] 在 select_type.php 中检索我的值。

希望这对某人有所帮助！

【讨论】：