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

时间:2014-12-05 11:42:49

标签: javascript php jquery html mysql

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

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

index.php page

<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  

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

1 个答案:

答案 0 :(得分:0)

在您上次发表评论后,我怀疑此问题是由您在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是不好的做法,因为它在请求期间锁定了ui

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