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

Question

3つのドロップダウンを持つカスタムページテンプレートがあり、各ドロップダウンの値は動的に設定されます。今、私はカスケードしたいです。 1番目のドロップダウンでユーザーが選択するオプションは、そのオプションの下にある値が3番目のドロップダウンと同じ2番目のドロップダウンのオプションとして表示されます。

私はJSスニペットを持っているが、3つのドロップダウンのカスケードが

スニペット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

あなたは別でそれを行うことができますが一方、他の2つの選択ボックスは、必要なボックスを投稿することによってajaxリクエストからフェッチすることができ、コンポーネントから送信できる選択ボックス全体は、

同様

：。

$（ "＃国"）生きる（ "変更"、機能（）{

$ .post（ "component.php"、国：$（この）.val（ ）、関数（データ）{

$（ "＃state-div"）.html（data）;

} }）;

他の2つは同じです。あなたの中に

Answer 2

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