似乎大多数链式选择都是用 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/它让我大部分时间,但不幸的是,数据似乎没有加载到第二个选择框中。
感谢您的关注!