リンクされたドロップダウンチェックボックスフィルタテーブル

Question

私はウェブ開発には新しく、解決できない問題があります。私は3つの項目：車、色とモーターの種類があるテーブルがあります。表の例はここにある：

<table> 
    <tr> 
     <th>Car</th> 
     <th>Color</th> 
     <th>Motor type</th> 
    </tr> 
    <tr> 
     <td>Mercedes</td> 
     <td>Blue</td> 
     <td>Petrol</td> 
    </tr> 
    <tr> 
     <td>Mercedes</td> 
     <td>Red</td> 
     <td>Diesel</td> 
    </tr> 
    <tr> 
     <td>VW</td> 
     <td>Blue</td> 
     <td>Hybrid</td> 
    </tr> 
    <tr> 
     <td>VW</td> 
     <td>Yellow</td> 
     <td>Diesel</td> 
    </tr> 
    <tr> 
     <td>Alfa Romeo</td> 
     <td>Red</td> 
     <td>Diesel</td> 
    </tr> 
    <tr> 
     <td>Alfa Romeo</td> 
     <td>Green</td> 
     <td>Petrol</td> 
    </tr> 
</table> 

私が選択した項目、自動車用、カラー用とモータタイプのための1つをフィルタリングするためのチェックボックスで3つのドロップダウンを追加します。ドロップダウンの項目は、表の項目に基づいて動的に入力する必要があります。 例えば：

• まずドロップダウンが3つのチェックボックスで構成されます：メルセデス、VWとアルファロメオ
• 第二には、青、赤、黄、緑
• を持っていますし、3つ目はガソリンを持つことになり、ディーゼルおよびハイブリッド

また、メルセデスを選択すると、イエローとグリーンの色が2番目のドロップダウンで隠され、3番目のドロップダウンでハイブリッドが隠れるはずです。黄/緑/ハイブリッドメルセデスがないからです。

誰かが適切なJavaScript/jQueryファイルの作成を手伝ってもらえますか？ ありがとうございます。

Answer 1

最初に、[オンに切り替える]チェックボックスをオンにします。

document.getElementById('your dropdownlist id').options[index].style.display = 'none';

が、これは一例です：

はその後、のonchangeイベントでは、あなたがドロップダウンリストの項目を非表示にしたい項目のインデックスを使用します。

function changeItemsOfDropDown() { 
 
    var drop = document.getElementById("optionDrop"); 
 

 
    for (var i = 0; i < drop.options.length; i++) { 
 
    if (drop.options[i].value == "Green" || drop.options[i].value == "Blue") { 
 
     drop.options[i].style.display = "none"; 
 
    } 
 
    } 
 
} 
 

 
function fillItemsToDropDown() { 
 
    var drop = document.getElementById("optionDrop"); 
 
    
 
    for(var i = 0; i < 5; i++) { 
 
    var option = document.createElement('option'); 
 
    option.text = option.value = "test" + i; 
 
    drop.add(option); 
 
    } 
 
    
 
}

<input type="checkbox" onchange="changeItemsOfDropDown()" >Click to hide items of Green and Blue</input> 
 
<button type="checkbox" onchange="fillItemsToDropDown()" >Fill new options to dropdownlist</button> 
 
<br> 
 
<select id="optionDrop"> 
 
       <option value="Red">Red</option> 
 
       <option value="Green">Green</option> 
 
       <option value="Orange">Orange</option> 
 
       <option value="Blue">Blue</option> 
 
      </select>

Answer 2

私はPHPで記述し、あなたがこの

を変更することができますが、

//fetch from database 
<input type="checkbox" value="Mercedes" onclick="car_fun(this.value)"> Mercedes 
<input type="checkbox" value="VW" onclick="car_fun(this.value)"> VW 
<input type="checkbox" value="Alfa Romeo" onclick="car_fun(this.value)"> Alfa Romeo 

<select id="color"> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Orange">Orange</option> 
<option value="Blue">Blue</option> 
</select> 

<select id="type"> 
<option value="Petrol">Petrol</option> 
<option value="Diesel">Diesel</option> 
<option value="Hybrid">Hybrid</option> 
</select> 

<script> 
function car_fun(car) 
{ 
$.ajax({ 
url:// your url, 
data:"$car_name="+car, 
type:"post", 
dataType:"json", 
success:function(result) 
{ 
$("#color").html(result.color); 
$("#type").html(result.type); 
} 
}); 
} 
</script> 

渡された車の値を使用して、データベースから値をフェッチするために、これが唯一のアイデアですよ