在级联选择框中从数据库中获取数据答案

【问题标题】：fetch data from database in cascaded select box在级联选择框中从数据库中获取数据
【发布时间】：2014-12-05 11:42:48
【问题描述】：

我正在发布我的整个代码，因为我无法找到错误所在，所以请原谅我的长代码。

我有一个有 2 个下拉列表的页面。第二个列表取决于从第一个列表中选择的值。

index.php 页面

<head>
<script language="JavaScript" src="functionsjq.js"></script>
<script language="JavaScript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
jQuery().ready(function($){
$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
jQuery.ajax({
          url: 'man_list.php',
          global: false,//
          type: "POST",
          dataType: "xml",
          async: false, 
          success: populateComp
    }); 

$("#manufacturer").change(function () 
    {
    resetValues();  
    var data = { man :$(this).attr('value') };
    jQuery.ajax({
          url: 'type_list.php',
          type: "POST",
          dataType: "xml",
          data:data,
          async: false, 
          success: populateType
    }); 
    });
        }); 
</script>

<style>
    #loading{
    background:url('loader64.gif') no-repeat;
    height: 63px;
    }
</style>
</head>
<body >
<p>Manufacturer:<select name="manufacturer" id="manufacturer" ><option value="">Please select:</option></select>&nbsp;
Printer type: <select name="printertype" id="printertype" disabled="disabled" ><option value="">Please select:</option></select>&nbsp;</p>
<div id="loading" style="display: none;"></div>
<div id="output" ></div>
</body>

functionsjq.js

function resetValues() {
    $('#printertype').empty();
    $('#printertype').append(new Option('Please select', '', true, true));  
    $('#printertype').attr("disabled", "disabled"); 
}

function populateComp(xmlindata) {

var mySelect = $('#manufacturer');
 $('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
  {
  optionValue=$(this).find("id").text();
  optionText =$(this).find("name").text();
   mySelect.append($('<option></option>').val(optionValue).html(optionText));   
  });
}

function populateType(xmlindata) {

var mySelect = $('#printertype');
$('#printertype').removeAttr('disabled');    
$(xmlindata).find("Printertype").each(function()
  {
  optionValue=$(this).find("id").text();
  optionText =$(this).find("name").text();
   mySelect.append($('<option></option>').val(optionValue).html(optionText));   
  });
}

man_list.php

<?php
// manufacturer_list
include("dbconfig.inc.php");

header("Content-type: text/xml");
echo "<?xml version=\"1.0\" ?>\n";
echo "<companies>\n";
$select = "SELECT * FROM search_parent";
try {
    foreach($dbh->query($select) as $row) {
        echo "<Company>\n\t<id>".$row['id']."</id>\n\t<name>".$row['searchname']."</name>\n</Company>\n";
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    die();
}
echo "</companies>";
?>

类型列表

<?php
include("dbconfig.inc.php");

header("Content-type: text/xml");

$manid = $_POST['man'];

echo "<?xml version=\"1.0\" ?>\n";
echo "<printertypes>\n";
$select = "SELECT id, fname FROM features WHERE parent_id = '".$manid."'";
try {
    foreach($dbh->query($select) as $row) {
        echo "<Printertype>\n\t<id>".$row['id']."</id>\n\t<name>".$row['fname']."</name>\n</Printertype>\n";
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    die();
}
echo "</printertypes>";
?>

表格视图

search_parent

id   searchname
1      abc

features（parent_id是search_parent表的id）

id  fname  parent_id
1    xyz    1

当我从第一个下拉列表中选择任何值时，我会在第二个下拉列表中相应地获取值，但问题是当我从第一个下拉列表中选择第一个值时，我没有得到任何对应的值在我的第二个下拉列表中为其赋值，无论我的第一个下拉列表的第一个位置是什么值。我在第二个菜单中没有得到任何价值

【问题讨论】：

在浏览器中按 f12 并在控制台中打开网络选项卡。当您选择该选项时，您看到（如果有的话）发送到服务器和从服务器接收到什么？
@andrew 当我点击该选项时，控制台中没有任何内容，事实上，有时我没有得到任何选项的任何价值
听起来$("#manufacturer").change 没有触发，您能否编辑您的帖子，显示jQuery.ajax({ url: 'man_list.php',... 返回的数据样本（如页面加载控制台中所示）
@andrew 我想指出我刚刚在脚本中看到的一件事，当我使用旧版本的 jquery 时，我只遇到第一个选项的问题，但使用较新的版本，即 1.11.1我没有得到任何价值

标签： javascript php jquery html mysql

【解决方案1】：

根据您的最后评论，我怀疑问题是由于您在 ajax 调用中使用 async:false 引起的，现在已弃用，请参阅 the docs

我要做的是直接在 php 中加载制造商列表，因为使用 ajax 这样做效率很低，因为 ajax 请求会给服务器带来额外的负载

Manufacturer:<select name="manufacturer" id="manufacturer" >
                  <option value="">Please select:</option>
                  <?php
                      foreach($dbh->query($select) as $row) {
                       echo "<Company>\n\t<id>".$row['id']."</id>\n\t<name>".$row['searchname']."</name>\n</Company>\n";
                      }
                   ?>
             </select>

使用async:false 是不好的做法，因为它会在请求期间锁定用户界面

这里是good post 正确处理 ajax 响应

【讨论】：