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

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

我有一个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 ;
}

最佳答案

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

关于javascript - 如何使用PHP和JS级联三个下拉菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37291611/