2011-10-11 99 views
0

說我有兩欄。第一列(C1)是一個國家列表。當選擇C1中的項目時,它顯示例如。 C2中的那個國家的城市。顯示第一列至第二列中選擇的數據

例如,

example

怎麼樣解決這個最好的方法是什麼?從哪裏開始的任何提示? jQuery/Javascript,XML,表格,列表?

回答

0

我推薦jQuery的點擊功能。將每個li的相關列表名稱存儲在rel屬性中。如果每個#col2項目還需要href等,您可以使用多個數據段創建list_a和list_b數組中的項目。使用CSS來相應地調整li。

<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> 
相關問題