Javascript 使用php填充三个后续选择列表+；mysql和jqueryajaxpost_Javascript_Php_Jquery_Mysql_Ajax

Javascript 使用php填充三个后续选择列表+；mysql和jqueryajaxpost

javascript php jquery mysql ajax

Javascript 使用php填充三个后续选择列表+；mysql和jqueryajaxpost,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,好的，我已经链接了脚本，这是索引文件的代码： <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']").c

好的，我已经链接了脚本，这是索引文件的代码：

<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>


jQuery（文档）.ready（函数（）{
jQuery（“选择[name='brand']”）。更改（函数（）{
var brandValue=jQuery（“选择[name='brand']”）。val（）；
jQuery.ajax({
类型：“POST”，
url:“handler.php”，
数据：（{品牌：brandValue，状态：1}），
beforeSend:function（）{jQuery（#loader”）.show（）；}，
完成：函数（）{jQuery（#loader”）.hide（）；}，
成功：功能（响应）{
jQuery（“#results”）.html（响应）；
jQuery（“#results”）.show（）；
}
});         
});
jQuery（'body'）。在（'change'，'select[name=“series”]'，function（）{
var seriesValue=jQuery（“选择[name='series']”）。val（）；
var brandValue=jQuery（“选择[name='brand']”）。val（）；
jQuery.ajax({
类型：“POST”，
url:“handler.php”，
数据：（{系列：系列价值，品牌：品牌价值，状态：1}），
beforeSend:function（）{jQuery（#loader”）.show（）；}，
完成：函数（）{jQuery（#loader”）.hide（）；}，
成功：功能（响应）{
jQuery（“#results”）.html（响应）；
jQuery（“#results”）.show（）；
}
});         
});
jQuery（'body'）。在（'change'，'select[name=“models”]”上，函数（）{
var modelsValue=jQuery（“选择[name='models']”）。val（）；
var seriesValue=jQuery（“选择[name='series']”）。val（）；
var brandValue=jQuery（“选择[name='brand']”）。val（）；
jQuery.ajax({
类型：“POST”，
url:“handler.php”，
数据：（{型号：modelsValue，系列：seriesValue，品牌：brandValue，状态：1}），
beforeSend:function（）{jQuery（#loader”）.show（）；}，
完成：函数（）{jQuery（#loader”）.hide（）；}，
成功：功能（响应）{
jQuery（“#results”）.html（响应）；
jQuery（“#results”）.show（）；
}
});         
});
});
品牌：
请选择

这是处理文件：

<?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']}";
}


系列：
请选择
型号：
请选择
由于“series”数据是动态创建的，所以需要在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>


jQuery（文档）.ready（函数（）{
jQuery（“选择[name='brand']”）。更改（函数（）{
var optionValue=jQuery（“选择[name='brand']”）。val（）；
jQuery.ajax({
类型：“POST”，
url:“data.php”，
数据：（{品牌：optionValue，状态：1}），
beforeSend:function（）{jQuery（#loader”）.show（）；}，
完成：函数（）{jQuery（#loader”）.hide（）；}，
成功：功能（响应）{
jQuery（“#series”）.html（响应）；
jQuery（“#系列”）.show（）；
}
});         
});
jQuery（'body'）。在（'change'，'select[name=“series”]'，function（）{
var seriesValue=jQuery（“选择[name='series']”）。val（）；
jQuery.ajax({
类型：“POST”，
url:“data.php”，
数据：（{series:seriesValue，状态：1}），
beforeSend:function（）{jQuery（#loader”）.show（）；}，
完成：函数（）{jQuery（#loader”）.hide（）；}，
成功：功能（响应）{
jQuery（“#model”）.html（响应）；
jQuery（“#model”）.show（）；
}
});         
});
});
东西似乎起作用了，我只想问一个问题，为什么我们要绑定这个jQuery（'body'）。关于（'change'，'select[name=“series”]”，function（）{
到body
应该这样做吗？我只是不太了解jQuery，所以我想知道它的良好实践和合法解决方案，如果是，我一定会遵循：）您告诉jquery“body”中有一个动态变化，就像创建了一些新元素一样，因此jquery基于新创建的html元素创建事件。您甚至可以缩小到加载选择框的部分（id=“model”）。有关更多信息，请参阅。@user2668182我相信这个答案值得您投票！我已更新了页面顶部的主要问题，请立即帮助我找出代码的错误；）更改此jQuery（#results”）.html（响应）；改为jQuery（#results”）。追加（响应）；