2010-07-25 5 views
1

두 개의 <select> 요소가 있습니다. 첫 번째 국가에는 미국, 캐나다, 영국, 러시아, 폴란드 등 국가가 포함되어 있으며 두 번째 국가는 도시가 포함되어 있습니다. 미국과 캐나다 (예 : 뉴욕, 로스 앤젤레스, 시카고 ... 또는 오타와 , Vancouver, Surrey ...)숨기기/표시 <select> 다른 사람에 따라 <select>

사용자가 첫 번째 <select>에서 캐나다 또는 미국을 선택하면 두 번째 도시가 표시되고 은 도시를 선택할 수 있어야합니다.

할 수 있습니까? Ajax 및 JQuery 유효성 검사 양식을 사용하여 많은 웹 사이트를 방문했으며 이와 비슷한 소스를 찾지 못했습니다.

감사합니다.

답변

1

선택 목록의 변경 이벤트를 수신하십시오. change 이벤트에서 선택한 값이 "USA"또는 "Canada"이면 다른 선택 목록을 표시하고 그렇지 않으면 숨 깁니다.

example을 참조하십시오.

은 선택 구조를 가정하면 다음과 같습니다

<select id="countries"> 
    <option val="USA">USA</option> 
    <option val="Canada">Canada</option> 
    <option val="Australia">Australia</option> 
    ... 
</select> 

<select id="cities"> 
    <option val="Vancouver">Vancouver</option> 
    <option val="New York">New York</option> 
    ... 
</select> 

는 국가 배열에 변경 이벤트를 듣습니다.

$("#countries").change(function() { 
    // find the selected country 
    var selectedCountry = $(this).val(); 
    // if US or Canada 
    if(selectedCountry == "USA" || selectedCountry == "Canada") { 
     // show the cities list 
     $("#cities").show(); 
    } 
    // otherwise hide it 
    else { 
     $("#cities").hide(); 
    } 
});