繁体   English   中英

为什么这个动态选择框不能与jQuery 1.9.1一起使用?

[英]Why is this dynamic select box not working with jQuery 1.9.1?

我发现使用PHP / MySQL / AJAX / jQuery的这个链式选择框不能与jQuery1.9.1一起运行。 第一个选择框工作正常,但是当我选择第二个,使用type_list.php从sql检索数据时,即使触发了php文件,也无法提取任何数据。 任何人都知道它为什么不使用jQuery 1.9.1?

jQuery 1.9.1: 示例 - 不工作。

jQuery 1.7.2: 示例 - 工作正常。

type_list.php:

<?php
// list of printer types for specific manufacturer
include("dbconfig.inc.php");

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

$manid = $_POST['man'];

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

JS代码:

<script>
jQuery().ready(function($){

$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;



// Ajax Called When Page is Load/Ready (Load Manufacturer)
jQuery.ajax({
                      url: 'man_list.php',
                      global: false,
                      type: "POST",
                      dataType: "xml",
                      async: false, 
                      success: populateComp
                }); 



//Ajax Called When You Change  Manufaturer
$("#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
                }); 
    });

//Ajax Called When You Change Type of Printer
$("#printertype").change(function () 
    {

        var data = { 
        man :$('#manufacturer').val(),
        typ : $(this).attr('value')
        };
    jQuery.ajax({
                      url: 'model_list.php',
                      type: "POST",
                      dataType: "xml",
                      data:data,
                      async: false, 
                      success: populateModel
                }); 
    });

//Do What You Want With Result .......... :)
    $("#printermodel").change(function () 
    {

//'you select Model='+$('#manufacturer').val()+'type='+$('#printertype').val()+'And Model='+$('#printermodel').val()
alert('you select Model = '+$('#manufacturer option:selected').text()+' ,type= '+$('#printertype option:selected').text()+' And Model = '+$('#printermodel option:selected').text()
);
    });



                    }); 
    </script>

任何人都知道它为什么不使用jQuery 1.9.1?

首先, 如果你自己做了一些调试(为什么不是你?),你会发现在AJAX POST请求中没有将man参数的值传递给服务器。

使用FireBug中的JavaScript调试器,很明显,这条线路有问题:

var data = { man :$(this).attr('value') };

.attr的文档告诉您,这应该只用于查询显式设置的值 - 这与select元素不同。

所以请改用.val()

尝试这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM