1 열에서 2 열까지의 선택 데이터 표시

두 개의 열이 있다고 가정 해보십시오. 1 열 (C1)은 국가 목록입니다. C1의 항목이 선택되면 예를 들어, C2에서 그 나라의 도시. 예를 들어 1 열에서 2 열까지의 선택 데이터 표시

example

어떻게 접근하는 가장 좋은 방법입니다

? 어디서부터 시작해야할까요? jQuery/자바 스크립트, XML, 테이블,리스트?

2011-10-11 user990013

jQuery 클릭 기능을 권장합니다. 각 li에 대한 관련 목록 이름을 rel 속성에 저장하십시오. 각 # col2 항목에도 href 등이 필요한 경우 list_a 및 list_b 배열의 항목을 여러 개의 데이터로 만들 수 있습니다. 그에 따라 CSS를 사용하십시오.

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
var lists = {}; //lists container 
lists.list_a = ['item 1','item 2','item 3']; //one list for each #col1 item 
lists.list_b = ['item 4','item 5','item 6']; 

$(function(){ //run on DOM ready 

    $('#col1 li').click(function(){ //when an li from #col1 is clicked 
     var list = $(this).attr('rel'); //grab it's related list 
     var html = ''; 
     for(var i=0;i<lists[list].length;i++){ 
      html += '<li>'+lists[list][i]+'</li>'; //create li from each item in list 
     } 
     $('#col2').html(html); //insert new list into #col2 
    }); 

}); 
</script> 
</head> 

<body> 
<div id="col1"> 
<li rel="list_a">lista</li> 
<li rel="list_b">list_b</li> 
</div> 
<div id="col2"> 
</div> 
</body>

출처

2011-10-11 18:25:14

1 열에서 2 열까지의 선택 데이터 표시

답변

관련 문제