我一直无法让ajax脚本运行一段时间。
基本上,我需要用户从一个下拉框中选择一个选项,然后根据选择的内容,根据MySQL查询相应地填充第二个下拉框。
我的脚本看起来像
<script type="text/javascript">
$(function(){
$('select [name="front-size"]').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html",
success: function(data) {
$("#sub").html(data);
}
});
});
});
</script>
我的初始下拉框由MySQL查询填充
<select name="front-size" onchange="ajaxfunction(this.value)">
<?php
$door_size = $db->prepare("SELECT DISTINCT door_size FROM doors WHERE door_model = '".$_SESSION['front_door']."'");
$door_size->execute();
while($row = $door_size->fetch(PDO::FETCH_ASSOC))
{
$size = $row['door_size'];
echo '<option value="'.$size.'">'.$size.'</option>';
}
?>
</select>
第二个下拉框为空
<select name="front-finish" id="sub" onchange="ajaxfunction(this.value)">
</select>
并且process.php应该根据之前选择的内容进行下一个查询(这可以单独使用)
<?php
session_start();
include ('config.php');
$parent = $_GET['parent'];
$update_option = $db->prepare("SELECT door_finish FROM doors WHERE door_model = '".$_SESSION['front_door']."' AND door_size = '".$parent."'");
$update_option->execute();
while($row = $update_option->fetch(PDO::FETCH_ASSOC))
{
$door_finishes = $row['door_finish'];
echo '<option value="'.$door_finishes.'">'.$door_finishes.'</option>';
}
?>
在Firebug中,当我选择第一个下拉菜单时,会显示此错误,但我无法解决。
ReferenceError: ajaxfunction is not defined
ajaxfunction(this.value)
我该如何解决这个问题?
答案 0 :(得分:1)
您正在调用ajax函数,但您尚未在代码中的任何位置定义它。
<script type="text/javascript">
$(function(){
$('select [name="front-size"]').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html",
success: function(data) {
$("#sub").html(data);
}
});
});
});
function ajaxFunction(stuff){
//do ajax stuff here will fix the error
}
</script>
更广泛的说明,为什么在准备好的函数中完成同样的事情时,你在html(onchange=ajaxfunction(this.value)
)中调用内联?
<script type="text/javascript">
(function(){
$('select[name="first"]').change(function(){
//do stuff
});
$('select[name="second"]').change(function(){
//do other stuff
});
})
</script>
会更好
编辑:检查此jsfiddle以获取工作示例http://jsfiddle.net/WF8CV/