如何使用PHP和JS级联三个下拉列表

Question

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

我有一个JS片段，但三个下拉列表的级联不起作用

代码段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>

代码段JS:

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

$（"#statediv"）.html（数据）；

}})；

其他两个也是如此。