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

Question

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

我的页面有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>

函数jq.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>";
?>

type_list

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

功能（parent_id是search_parent表的ID）

id  fname  parent_id
1    xyz    1

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

Answer 1

在您发表最后评论之后，我怀疑问题是由于您不赞成使用的ajax调用中使用async:false而引起的，请参阅文档

我要做的是直接在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都是不好的做法，因为它会在请求期间锁定ui

这是正确处理ajax响应的好帖子

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-05 12:26:08

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-05 12:26:08

解决方案1
0 已采纳 2014-12-05 12:26:08