基于先前选择的Jquery下拉选项

时间:2014-07-06 09:32:18

标签: javascript php jquery html mysql

是否可以根据之前的下拉选择从数据库中获取数据?

例如:

<select id="paramscountries" class="chzn-done" style="display: none;" name="params[countries][]" multiple="true" size="10">
    <option value="1">Afghanistan</option>
    <option value="2">Albania</option>
    <option value="3">Algeria</option>
    <option value="4">USA</option>
</select>

如果我从上面的列表中选择美国,它将进行查询&amp;从数据库中获取所有州名称。例如来自states.php&amp;将在不重新加载该页面的情况下在另一个下拉列表中显示所有州名称。

2 个答案:

答案 0 :(得分:3)

您需要使用Javascript或jQuery,并使用它发布到将返回结果的页面。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="paramscountries" class="chzn-done" style="display: block;" onchange="getNewList($(this).val());" name="params[countries][]" multiple="true" size="10">
    <option value="1">Afghanistan</option>
    <option value="2">Albania</option>
    <option value="3">Algeria</option>
    <option value="4">USA</option>
</select>

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

<script type="text/javascript">
function getNewList(country) {
    $.post('post.api.php', {'api': 'getStates', 'countries': country}, function(response) {
        var obj = $.pareseJSON(response);
        $('#states').html(obj.states);
    });
}

post.api.php页面

<?php

if(isset($_POST['api'])){

    if($_POST['api'] == 'getStates'){

        // sdet the countries array to a variable
        $countries = $_POST['countries'];

        // set a variable to hold the results
        $results = array();

        // query your db
        $stm = $db->prepare('SELECT * FROM `your_database` WHERE `country` IN("'.implode('","', $countries).'")');
        $stm->execute();
        if($stm->rowCount() > 0){
            foreach($stm->fetchAll(PDO::FETCH_ASSOC) as $row){
                $results['states'] .= '<option value="'.$row['stateName'].'">'.$row['stateName'].'</option>';
            }
        }            
        echo json_encode($results);
    }

}

我会做那样的事情。希望这里有足够的东西让你滚动。

答案 1 :(得分:1)

尝试使用jquery ajax请求。像这样的东西

<强>的jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#paramscountries').change(function(){
        $.ajax({
            url: 'states.php'
            ,data:{val: $(this).val()}
            ,dataType:'json'
            ,type: 'POST'
            ,success:function(data){
                for(var i = 0; i < data.length; i++){
                    var dropDownValue = '<option value="'+ data[i] +'">'+ data[i] +'</option>'
                    $('#secondDropDownList').append(dropDownValue);
                }
            }
        });
    });
});
</script>

在states.php

$con=mysqli_connect("localhost","user","password","db_Name");
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($POST['val'])){
$var = $_POST['val'];
$result = mysqli_query($con,"SELECT * FROM table_name WHERE table_column_name = '$var'");
$arr = array();
while($row = mysqli_fetch_array($result)) {
   $arr[] =  $row['name'];
}
echo json_encode($arr);
}
mysqli_close($con);

在HTML中

<select id="secondDropDownList"></select>