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

我发布我的整个代码，因为我无法找到错误的位置，所以请原谅我的长代码。从级联选择框中的数据库获取数据

我有一个页面有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>"; 
?>

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

当我选择从第一个下拉的任何值下降据此，我在获取值我的第二个下拉列表，但问题是，当我从第一个下拉列表中选择第一个值时，无论第一个下拉列表中的值是多少，我都没有在第二个下拉列表中获得相应的值我的位置首先下拉列表。我不明白的第二个菜单

来源

2014-12-05 Sam

命中F12在浏览器和控制台打开网络选项卡。当您选择该选项时，您看到（如果有的话）发送到服务器和从服务器接收到的什么内容？ – andrew 2014-12-05 11:55:52

@andrew当我打开选项时没有任何东西写在控制台中，事实上我没有为任何选项获得任何价值 – Sam 2014-12-05 12:03:56

听起来像'$（“＃制造商”）。change'没有开火，你能编辑你的显示由'jQuery.ajax返回的数据样本（{0}} {url：'man_list.php'，...'（如页面加载中的控制台所示） – andrew 2014-12-05 12:06:40

按照你最后的评论它的任何价值，我怀疑问题是由于您使用的async:false在现在已不建议您Ajax调用产生的，看到the docs

我会做什么是直接在PHP载入制造商名单，与阿贾克斯这样做是低效的，因为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响应

来源

2014-12-05 12:26:08 andrew

回答

相关问题