콤보 상자 선택에 따라 특정 데이터 표시

Question

2 개의 콤보 상자가 있습니다. 콤보 상자 1 선택을 기반으로 콤보 상자 2에 특정 데이터를 표시하려고합니다.

하지만 컴 볼트 1에서 원하는 옵션을 누르면 콤보 박스 2가이 선택과 일치하는 데이터로 채워집니다.

나는 combobox 1 옵션에 클릭 기능을 넣으려고했으나 클릭 할 때 작동하지 않았다. 그렇게 할 방법이 있습니까?

Answer 1

첫 번째 드롭 다운에서 change 이벤트 처리기를 할당 한 다음 선택한 값에 따라 두 번째 드롭 다운에 넣어야하는 값을 가져옵니다. 다음은 전형적인 제조업체 -> 모델 예 :

마크 업 :

​<select id="manufacturers"> 
    <option></option> 
    <option value="Audi">Audi</option> 
    <option value="Toyota">Toyota</option> 
</select> 

<select id="cars"> 
</select> 

자바 스크립트 :

​​var cars = { 
    Audi: [ 'A2', 'A3', 'A4' ], 
    Toyota: [ 'Auris', 'Avalon', 'Yaris' ] 
}​​​​; 

$("#manufacturers").change(function() { 
    var $this = $(this); 
    var selectedValue = $this.val(); 
    if (selectedValue) { 
    var $cars = $("#cars").empty(); 
    var newCars = cars[selectedValue]; 
    $.each(newCars, function() { 
     console.log(this); 
     $("<option>" + this + "</option>").appendTo($cars); 
    }); 
    } 
}); 

DEMO.

Answer 2

선택 태그 자체 (옵션 태그 제외)에서 변경 (클릭하지 않음) 이벤트를 사용해야합니다. 예 :

$('#combo1').change(function() { 
    // Load new content for #combo2 here 
}); 

Answer 3

$('select.option1').change(function() { 
    // fill option2 with data from somewhere 
}); 

Answer 4

사슬로 매인 내가 어떤 프로젝트에서이 플러그인을 사용했습니다 체인 선택

http://www.appelsiini.net/projects/chained

에 대한 간단한 jQuery 플러그인이며 안정적으로 작동하고 예상대로 . 사용해보십시오 ...