使用ajax将动态选择框中的数据传递给php,无需提交或重新加载

时间:2014-07-30 14:13:16

标签: php jquery ajax forms

我想创建两个选择框:一个从数据库中获取选项,另一个根据第一个选择框的值获取选项。

我当前的代码如下(我从第一个框中获取了一个警告的值,但是不知道如何在第二个框的sql查询中获取它)。我的文档名是tutorial.php,我没有使用除include / config.php中的数据库函数之外的任何其他文件。

我已经关注了数十个教程和堆栈溢出答案,但我无法让它工作。如何在同一页面上获取php代码的选择值?

jquery的:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $( "#shoot" ).change(function(){ 
    id_firstSelect = $("#shoot").val();
    loadSecondSelect(id_firstSelect);
});

function loadSecondSelect(first_id)
{
    $("#model").ready(function(e) 
    {
        $.get(
        route.php, //Filter your select
        params, // In this case your id
        function(result) 
        {
        $("#model").empty();
        $("#model").append('<option value="0">-- Select --</option>');
        if(result.response['id_second'].length) // this receive your data 
        {
            for(var i=0, len=result.response['id_2'].length; i<len; i++) 
            {
                $("#model").append('<option value="' + result.response['id_2'][i] + '">' + result.response['name_2'][i]+'</option>'); 
            }
        }                       
        },
        "json");
    });
}

});
</script>

表单与php函数:

<form action="" method="POST" enctype="multipart/form-data">
    <div>
    <select name="category">
        <option value="paard" selected>Paarden</option>
        <option value="hond">Honden</option>
        <option value="mens">Mensen</option>
        <option value="eigen">Eigen werk</option>
    </select>
    <input type="file" name="files[]" multiple id="file"/><p>

    Ophalen uit database shoots:
    <select name="shoot" id="shoot">
<?php
    $values = mysql_query("SELECT distinct name FROM shoots") or die(mysql_error());
    //$numrows = mysql_num_rows($values);
    while ($result=mysql_fetch_array($values)){
        echo "<option value='".$result['name']."'>".$result['name']."</option>";
    }
?>
    </select><p>

    <select name="model" id="model"></select>

    <label class="radio">Portfoliomateriaal</label>
    <input type="radio" name="folio" value="TRUE" /> <span>Ja</span>
    <input type="radio" name="folio" value="FALSE" checked /> <span>Nee</span><p>

    <input type="submit" value="Upload" id="submit" />
    </div>
</form>

1 个答案:

答案 0 :(得分:0)

在第一个选择中,您可以调用具有select的id的函数来过滤第二个选择的数据,如:

在第一个选择中你可以用第一个id填充第二个:

$( "#id_firstSelect" ).change(function() 
{ 
    id_firstSelect = $("#id_firstSelect").val();
    loadSecondSelect(id_firstSelect);
}

并调用该函数加载第二个选择

function loadSecondSelect(first_id)
{
    $("#id_secondSelect").ready(function(e) 
    {
        $.get(
        route.php, //Filter your select
        params, // In this case your id
        function(result) 
        {
        $("#id_secondSelect").empty();
        $("#id_secondSelect").append('<option value="0">-- Select --</option>');
        if(result.response['id_second'].length) // this receive your data 
        {
            for(var i=0, len=result.response['id_2'].length; i<len; i++) 
            {
                $("#id_secondSelect").append('<option value="' + result.response['id_2'][i] + '">' + result.response['name_2'][i]+'</option>'); 
            }
        }                       
        },
        "json");
    });
}