0
说我有两栏。第一列(C1)是一个国家列表。当选择C1中的项目时,它显示例如。 C2中的那个国家的城市。显示第一列至第二列中选择的数据
例如,
怎么样解决这个最好的方法是什么?从哪里开始的任何提示? jQuery/Javascript,XML,表格,列表?
说我有两栏。第一列(C1)是一个国家列表。当选择C1中的项目时,它显示例如。 C2中的那个国家的城市。显示第一列至第二列中选择的数据
例如,
怎么样解决这个最好的方法是什么?从哪里开始的任何提示? jQuery/Javascript,XML,表格,列表?
我推荐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>