링크 된 드롭 다운 확인란 필터 테이블

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> 

내가 선택한 항목, 자동차에 대한 하나, 색 하나와 모터 유형을 필터링하는 체크 박스로 3 드롭 다운을 추가 할. 드롭 다운의 항목은 표의 항목을 기반으로 동적으로 채워 져야합니다. 예를 들어 :

• 첫 번째 드롭 다운 3 개 체크 박스로 구성됩니다 : 메르세데스, 폭스 바겐과 알파 로메오
• 둘째는 가솔린, 디젤있을 것이다 파란색, 빨간색, 노란색 및 녹색
• 와 세 번째가되며, 하이브리드
또한

, 내가 벤츠를 선택하면, 예를 들어, 노란색과 녹색 색상은 두 번째 드롭 다운에 숨겨진되어야하고, 어떤 노랑/녹색/하이브리드 메르세데스가 아니기 때문에 하이브리드가, 세 번째 드롭 다운에 숨겨진되어야한다.

누군가 적절한 JavaScript/jQuery 파일을 작성하는 데 도움을 줄 수 있습니까? 정말 고마워요.

Answer 1

먼저 추적 대상 확인란을 onchange로 설정하십시오.

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>

내가 PHP를 쓸 생각

Answer 2

, 당신은 당신

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

가 전달 된 차 값을 사용하여 데이터베이스에서 값을 가져 오기 위해이

이는 아이디어 수정할 수 있습니다