複数の依存ドロップダウンメニュー

Question

複数のダイナミックドロップダウンが発生しています。だから私は解決しようとする問題です。私は次の4つのサンプルテーブルをデータベースに格納しており、値に動的にアクセスしたいと考えています。 ドロップダウン2ドロップダウン4は、私は、次のように最初のドロップダウンの値を取得2,3

| ID | name | percent |  | ID | name | languageValue | 100 | 75 | 501 | 
| --- | ------ | ------- |  | --- | ------- | ------------- | --- | --- | --- | 
| 1 | 100% | 100  |  | 1 | English | english  | y | y | n | 
| 3 | 75% | 75  |  | 2 | German | german  | y | n | n | 
| 2 | 50% 1 | 501  |  | 3 | French | french  | n | n | y | 
Table 1 (Dropdown 1)   Table 2 (Dropdown 2) 

| ID | CoreSubjectName | CoreSubjectValue | | ID | MinorSubjectName | MinorSubjectValue | 
| --- | --------------- | ---------------- | | --- | ---------------- | ----------------- | 
| 1 | Maths   | maths   | | 1 | English   | english   | 
| 2 | Politics  | politics   | | 2 | Politics   | politics   | 
| 3 | Chemics   | chemics   | | 3 | Chemics   | chemics   | 
Table 3 (Dropdown 3)       Table 4 (Dropdown 4) 

に依存して、ドロップダウン1に依存しています。 （私は終了タグを残します）。

<select name="percent" id ="percent" onchange="getPercent(this.value);"> 
    <option value="">Choose Percent</option> 
<?php 
    $PercentPost = $_POST["percent"]; 
    $PercentQuery = "SELECT percent, name FROM percentTable"; 
    $results=mysqli_query($conn, $anteilQuery); 
    //loop 
    while ($row = mysqli_fetch_array($results)){ 
     echo '<option value="'.$row[percent].'">'.$row[name].'</option>'; 
    } 
?> 
<select name="language" id="language"> 
      <option value=""></option> 
     </select> 

とJS-ajaxの2番目のドロップダウンを充填するための：

function getPercent(val){ 
     //ajax function 
     $.ajax({ 
      type: "POST", 
      url: "form.php", 
      data: "percent="+val, 
      success: function(data){ 
       $("#language").html(data); 
      } 
     }); 

    } 

form.phpは、これまでのところ、このスニペットが含まれています

$PercentPost = $_POST["percent"]; 
if (!empty($_POST["percent"])) { 

    $query="SELECT name, languageValue FROM table2 WHERE `$PercentPost`='y'"; 

    $results = mysqli_query($conn, $query); 

    while ($row = mysqli_fetch_array($results)){ 
     echo '<option value="'.$row[languageValue].'">'.$row[name].'</option>'; 
    } 
} 

これはうまく動作しますが、今、私は「ドンドロップダウン4を動的に満たす方法を知っています。ドロップダウン4では、2と3の選択値は選択できません。私はそれがjsのajaxで行われなければならないことを知っていますが、私はどのように手掛かりがありません。

誰かが私を助けることができますか？ 多くのことがあります！

Answer 1

したがって、ドロップダウン4を無効（disabled属性）または不可視（style="display:none;"）として読み込みます。

私は値0または-1で...あなたのドロップダウン2と3を選択などのデフォルト値に追加します（たとえば、次のPHPコードを参照してください）

その後、私はonchange属性を追加します次に、あなたのPHPは可能性があり

function loadDD4Values(){ 
    if ($('#language').val() <> 0 && $('#coreSubject').val() <> 0){ 
     //ajax function 
     $.ajax({ 
      type: "POST", 
      url: "form.php", //You can detect what to do based on params, or have a different PHP page 
      data: "language="+$('#language').val() + "&coreSubject=" + $('#coreSubject').val() , 
      success: function(data){ 
       $("#minorSubject").html(data); 
       $('#minorSubject').style.display = '';//or remove attribute disabled, also if you want you can disable/hide DropDown 2 and 3 here 
      } 
     }); 
    }else{ 
     $('#minorSubject').style.display = 'none'; //or add attribute disabled 
    } 

    //Also here you can decide what to do if the user modify DropDown 2 or 3 for example, reset the DropDown 4 values, or just the selected one: 
    $('#minorSubject').selectedValue = 0; 
} 

：いくつかのタイプミスがあるだろうようにテストされていない

if(isset($_POST['percent'])){ 
    // Your code from the DropDown 2 
}else if (isset($_POST['language']) && isset($_POST['coreSubject'])){ 
    //You didn't had sql injection protection in your question code !!! 
    $language = mysql_real_escape_string($_POST['language']); 
    $coreSubject = mysql_real_escape_string($_POST['coreSubject']); 

    $query="SELECT ... FROM minorSubject WHERE `$language`='...' AND `$coreSubject`='...'"; 

    $results = mysqli_query($conn, $query); 

    echo '<option value="0">Select ...</option>'; // A default row 
    while ($row = mysqli_fetch_array($results)){ 
     echo '<option value="'.$row[ID].'">'.$row[...].'</option>'; //Use ID for the value, It's made for that 
    } 
} 

コードドロップダウン2と3、彼らは同じjsの関数を呼び出します両方あなた自身の使い方に合わせてください。

補足情報をお気軽にお尋ねください。