带有jquery/php/database的链接选择框不起作用
Chained select boxes with jquery/php/database not working
似乎大多数链式选择都是用JSON完成的,但不幸的是,使用我的数据库来实现这一点要方便得多。它就快到了,但由于某种原因,第二个选择框没有正确加载。相反,它加载了它所在页面的整个HTML,我不知道为什么。
以下是我得到的(注意make_list()和model_list(
JS:
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>loading...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
if(cat>0 && type>0)
{
var result = $("select#type option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
HTML/PHP:
<form id="select_form">
<div class="clearfix">
<select id="category">
<option value="">Any</option>
<?php foreach ( make_list() as $make ) { ?>
<option value="<?php echo $make ?>"><?php echo $make ?></option>
<?php } ?>
</select>
</div>
<div class="clearfix">
<select id="type">
<option value="">Any</option>
</select>
</div>
</form>
当第一个选择被更改时,JQuery应该查看同一文件夹中名为"select_type.php"的文件。以下是该文件中的内容(奇怪的是,$_POST['id']似乎也没有附加到该文件中,尽管它是在JS中创建的):
foreach ( model_list($_POST['id']) as $model ) {
echo '<option value="'.$model.'">'.$model.'</option>';
}
我一直在此项目中使用此资源:http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/这让我很头疼,但不幸的是,数据似乎没有加载到第二个选择框中。
谢谢你的光临!
好吧,所以我想出了这个。希望这能帮助将来遇到同样问题的人。
对文件select_type.php的调用不正确。调用必须是绝对的,而不是相对的。由于我使用wordpress,我只是将行改为:
$.get("<?php echo get_template_directory_uri() . '/includes/select-model.php'; ?>", {id:id}, function(data){
你会注意到我把$.post改成了$.get。我不知道为什么post不起作用,但get似乎很好。我只是使用$_GET['id']在select_type.php中检索我的值。
希望这能帮助到别人!
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 如何利用多链接延迟检查并显示ping结果,然后使用JavaScript选择最快的URL
- JavaScript-取决于多个下拉选择或复选框的动态链接
- <中的链接;选择>下拉选项
- 表单上预先选择的选项取决于您的链接'We’’’’来自
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- Jquery UI日期选择器没有'单击链接时不会再次显示
- 打开'选择文件'窗口单击锚链接(跳过单击'选择文件'按钮)
- 传单:如何在弹出窗口中创建链接选择器
- 表单下拉选择链接
- WordPress 类别下拉菜单选择链接断开
- 下拉列表中的链接选择不起作用的IE8 / 9打开下拉选择链接,警报有效
- 我可以选择链接引用的 id 吗?
- 如何通过选择链接 - HTML 来更改视频源
- 选择链接此关键字的插件之外的元素
- 使用jQuery选择链接的href并将其存储为字符串
- 当选择链接时关闭引导菜单
- 单击浏览器中的刷新按钮与选择链接并按enter键之间的区别是什么
- 通过选择链接将两个不同的内容加载到两个不同的位置,而无需重新加载页面
- 根据使用的浏览器选择链接