使用 php+mysql 和 jquery ajax post 填充三个后续选择列表
populating three follow up select lists using php+mysql and jquery ajax post
好的,我已经链接了脚本,现在是索引文件的代码:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("select[name='brand']").change(function(){
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
jQuery('body').on('change','select[name="series"]',function(){
var seriesValue = jQuery("select[name='series']").val();
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({series: seriesValue, brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
jQuery('body').on('change','select[name="models"]',function(){
var modelsValue = jQuery("select[name='models']").val();
var seriesValue = jQuery("select[name='series']").val();
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({models: modelsValue, series: seriesValue, brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
});
</script>
Brands:
<select name="brand">
<option value="">Please Select</option>
<?php
$brands = get_brands();
foreach($brands as $brand) {
?>
<option value="<?php echo $brand['brand_id']?>"><?php echo $brand['brand_name']; ?></option>
<?php
}
?>
</select>
<div id="results" style="display:none;"></div>
<div id="loader" style="display:none;"><img src="ajax-loader.gif" alt="loading..."></div>
这是正在处理的文件:
<?php
if(!empty($_POST['brand'])) {
$curentSeries = get_series($_POST['brand']);
?>
Series:
<select name="series">
<option value="">Please Select</option>
<?php
foreach($curentSeries as $ser) {
?>
<option value="<?php echo $ser['series_id']; ?>"><?php echo $ser['series_name']; ?></option>
<?php
}
?>
</select>
<?php
}
?>
<?php
if(!empty($_POST['series'])) {
$curentModels = get_models($_POST['brand'], $_POST['series']);
?>
Model:
<select name="models">
<option value="">Please Select</option>
<?php
foreach($curentModels as $model) {
?>
<option value="<?php echo $model['model_id']; ?>"><?php echo $model['model_name']; ?></option>
<?php
}
?>
</select>
<?php
}
?>
<?php
if(!empty($_POST['models'])) {
echo "<br />brand: {$_POST['brand']}<br />series: {$_POST['series']}<br />model: {$_POST['models']}";
}
脚本现在正在工作,我们想通了,最后一个问题在处理文件中,当我整理出来时,现在一切都很好
由于你的"系列"数据是动态创建的,你需要在jquery中使用'on'事件。检查以下代码
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("select[name='brand']").change(function(){
var optionValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "data.php",
data: ({brand: optionValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#series").html(response);
jQuery("#series").show();
}
});
});
jQuery('body').on('change','select[name="series"]',function(){
var seriesValue = jQuery("select[name='series']").val();
jQuery.ajax({
type: "POST",
url: "data.php",
data: ({series: seriesValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#model").html(response);
jQuery("#model").show();
}
});
});
});
</script>
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 根据前两个下拉ID显示第三个下拉列表
- 如何修改代码以将其应用于三个下拉列表?(Jquery)
- 三个不同数据库表的相关下拉列表
- 两个 html 对象(列表、输入)应该生成第三个列表
- 尝试在单击按钮时显示三个选择下拉列表的值
- 根据第二个和第一个下拉列表选择填充第三个下拉列表
- 如何在Perstashop的产品列表中用图像替换第三个产品
- 如何选择第三个列表项目与javascript
- 在第一个下拉选项上选择第二个或第三个下拉列表
- 三个选择列表由数据库驱动
- 通过比较三个url生成url列表
- 使用一个javascript自定义滚动三个列表
- 如何隐藏第三个嵌套列表在这个css下拉嵌套列表
- jQuery如何基于第三个选择列表选项更改第二个选择列表,并基于第一个更改第二选择列表
- 如何使用jQuery停止列表最后三个元素的操作
- 使用 php+mysql 和 jquery ajax post 填充三个后续选择列表
- 选择每个无序列表的前三个列表项
- MVC下拉列表级联-如何在第一个ddl选择更改时在第三个ddl上触发事件