JavaScriptを使用して3つのドロップダウンをカスケードする方法は？

Question

3つのドロップダウンをカスケードする方法はありますか？

私は、3つのドロップダウンを持つページテンプレートを持っています。オプションのhtmlタグの値は、mysqlによって動的に取り込まれます。 3番目のドロップダウンのオプションを2番目のドロップダウンに応じて表示したいのですが、2番目のドロップダウンのオプションは1番目のドロップダウンで選択したオプションによって表示されます。

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

私はいくつかのJSスクリプトを試しましたが、正しく動作させることはできません。私を助けてください、私はこの上で、ほぼ1週間立ち往生:(

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> 

Answer 1

ここでは私のサンプルでは、​​（あなたの例のためにそれを適応させる）、私は助けることを願っています：

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