如何使用javascript级联3下拉列表？

如何级联三个下拉列表

我有一个带有三个下拉列表的页面模板，选项html标记的值由mysql动态填充。我想显示第三个下拉列表中的选项取决于第二个下拉列表，它将显示第二个下拉列表中的选项取决于第一个下拉列表中选择的选项

E.g. (1) Job position (2) location (3) a dropdown with "Yes" and "No" option. (Job Position -> Location -> Yes/No (dropdown))

我尝试了一些JS脚本，但我没有运气正确地工作。请帮帮我，我在这方面坚持了将近一个星期：(

PHP代码段：

<?php
ob_start();
global $wpdb;

$query_position = "";
$list_position = "";
$result_position = "";
$query_locations = "";
$list_location = "";
$result_location = "";
$query_processed = "";
$list_processed = "";
$result_processed = "";

$query_position = $wpdb->get_results('SELECT DISTINCT position FROM resume_databank ORDER BY position ASC', OBJECT);
$query_locations = $wpdb->get_results('SELECT DISTINCT hiring_location FROM resume_location ORDER BY hiring_location ASC', OBJECT);
$query_processed = $wpdb->get_results('SELECT DISTINCT process_resume FROM resume_databank ORDER BY process_resume ASC', OBJECT);
?>

<div id="">
<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">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_position 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_location" id="#ddress_search LABEL">Location</label>
<br/>
<select name="list_location" id="filterbylocation">
    <option name="default" class="filter_by" selected="selected" value="Select by Location">Select by Location</option>
    <?php
    foreach($query_locations as $option){
        if(isset($_POST['list_location']) && $_POST['list_location'] == $option->hiring_location)
            echo '<option name="list_location" class="filter_by" selected value="'. $option->hiring_location .'">'. $option->hiring_location .'</option>';
        else
         echo '<option name="list_location" class="filter_by" value="'. $option->hiring_location.'">'. $option->hiring_location .'</option>';
     };
    ?>
</select>
</div>
<div class="div-select">
<label for="list_processed" id="#ddress_search LABEL">Processed</label>
<br/>
<select name="list_processed" id="filterbyprocessed">
    <option name="default" class="filter_by" selected="selected" value="Select by Processed">Select by Processed</option>
    <?php
    foreach($query_processed as $option){
        if(isset($_POST['list_processed']) && $_POST['list_processed'] == $option->processed_option)
            echo '<option name="list_processed" class="filter_by" selected value="'. $option->processed_option .'">'. $option->processed_option .'</option>';
        else
         echo '<option name="list_processed" class="filter_by" value="'. $option->processed_option.'">'. $option->processed_option .'</option>';
     };
    ?>
</select>
</div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>
</div>

位置


按位置选择
位置


按位置选择
处理


按处理选择

这是我的示例（根据您的示例进行调整），我希望能帮助您：

<?
mysql_connect('localhost','root','');
mysql_select_db('test');
if(!empty($_POST['location'])) {
$qry = mysql_query("SELECT * FROM location");
echo '<select id="location">';
while($rw = mysql_fetch_row($qry)) {
echo '<option value="'.$rw[1].'">'.$rw[1].'</option>';
}
echo '</select>';
} else {
$query = mysql_query("SELECT * FROM job");
echo '<select id="job">';
while($row = mysql_fetch_row($query)) {
echo '<option value="'.$row[0].'">'.$row[1].'</option>';
}
echo '</select>';
}
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#job").bind("change", function(){
$.post("index.php",{'location': $('#job').val()},function(data){
$('#location').remove();
$("#job").after(data);
});
});
});
</script>

---

如果js脚本和php在同一个文件上怎么办？如何在这里加载它
$（“#location”）。加载（“rpc.php”）
？但是js和php在同一个页面上。让我们来看看。