2011-10-11 102 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> 
相关问题