如何使用 PHP 和 JS 级联三个下拉菜单？

Question

我有一个带有三个下拉列表的自定义页面模板，每个下拉列表的值都是动态填充的。现在，我想级联它。无论用户在第一个下拉菜单中选择什么选项，该选项下的值都将显示为第二个下拉菜单中的选项，与第三个下拉菜单中的相同。

我有一个JS sn-p，但是三个下拉列表的级联不起作用

PHP 代码段：

<form action='' method='post' name='test' id='test'>
<div class="div-select">
<label for="list_position" id="idname">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.form)">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_location as $option){
        if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
            echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
        else    
         echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
     };
    ?>
</select>
</div>
<div class="div-select">
    <label for="list_position" id="idname">Position</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
        <?php
        foreach($query_location as $option){
            if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
                echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
            else    
             echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
         };
        ?>
    </select>
    </div>
<div class="div-select">
    <label for="list_position" id="idname">Position</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
        <?php
        foreach($query_location as $option){
            if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
                echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
            else    
             echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
         };
        ?>
    </select>
    </div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>

代码片段：

function app_position(form){
    var val=form.list_position.options[form.list_position.options.selectedIndex].value; 
    self.location='page-resume-databank?list_position=' + val ;
}

function app_location(form){
    var val=form.list_position.options[form.list_position.options.selectedIndex].value; 
    var val2=form.list_location.options[form.list_location.options.selectedIndex].value; 

    self.location='page-namepage?list_location=' + val + '&list_processed=' + val2 ;
}

Answer 1

<form action='' method='post' name='resumeDatabank' id='resumeDatabank'>
<div class="div-select">
<label for="list_position" id="#ddress_search LABEL">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.value)">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_location as $option){
        if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
            echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
        else    
         echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
     };
    ?>
</select>
</div>
<div class="div-select" id="show_street">
    <label for="list_position" id="#address_search LABEL">Street</label>
    <br/>
    <select name="list_position" id="filterbypostion">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>

    </select>
    </div>
<div class="div-select" id="show_roads">
    <label for="list_position" id="#address_search LABEL">Roads</label>
    <br/>
    <select name="list_position" id="filterbypostion">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>

    </select>
    </div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>

<script>
function app_position(city){
    //city is selected value of city drop down
    //give the correct path to you ajax.php
        $.ajax({
            type: "POST",
            url: 'ajax.php',
            data: "city="+city+"type=street" ,
            success: function(data)
            {
                $("#show_street").html(data);
            }
            });
}

function app_location(street){
    //street is selected value of street drop down
    //give the correct path to you ajax.php
        $.ajax({
            type: "POST",
            url: 'ajax.php',
            data: "street="+street+"type=roads" ,
            success: function(data)
            {
                $("#show_roads").html(data);
            }
            });

}
</script>

在你的 ajax.php 文件中

<?php 

$type = $_POST['type'];//this type will load the relevant function.

if($type="street"){
    $city = $_POST['city'];
//now get the value of streets belongs to this city
$your_query = "Select * from street_table where city_id=$city";//you can modify this query according to your table

$res = mysql_query($your_query); 
?>
<label for="list_position" id="#address_search LABEL">Street</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.value)">
<?php while($raws = mysql_fetch_assoc($res)){?>
<option name="default" class="filter_by" selected="selected" value="<?php echo $raws['street_id']?>"><?php echo $raws['street_name']?></option>
        <?php }//END OF WHILE?>
</select>
<?php }//END OF IF CHECcing street option

if($type="roads"){
        $street = $_POST['street'];
//now get the value of streets belongs to this city
$your_query_roads = "Select * from road_table where street_id=$street";////you can modify this query according to your table

$res_roads = mysql_query($your_query_roads); 
?>
<label for="list_position" id="#address_search LABEL">Street</label>
    <br/>

<?php while($raws_roads = mysql_fetch_assoc($res_roads)){?>
<input name="roads" type="radio" value="<?php echo $raws_roads['road_id'];?>">

        <?php }//END OF WHILE?>

<?php
    }
?>

Answer 2

你可以用另一种方式来做，另外两个选择框可以通过发布你想要的框从ajax请求中获取，整个选择框你可以从一个组件发送，

喜欢：

$("#country").live("change", function(){

$.post("component.php", country:$(this).val(), function(data){

$("#state-div").html(数据);

} });

其他两个也一样。