下拉菜单怎么关联阿。(高手指点)

页面两个下拉菜单。要怎么关联起来阿
例如：这是奥运会的项目。
两个下拉菜单。一个菜单男女，一个菜单是男女的项目名称

没记错的话以前回答过这个问题.当然是js/jquery 来控制嘛...
后台数组:$arr = array(1 => array('gender' => '男','list' => array(1 => '拳击',2=>'棒球')));
前台 var list = <?php echo json_encode($arr);?>;
然后就是循环构建html的事了。
<html>
<head>
<script type="text/javascript">
function select()
{
var ename=document.f1.ename.value;
var names=new Array(3);
names['男']=['拳击','棒球'];
names['女']=['女子摔跤','平衡术'];
document.f1.film.length=0;//清空下拉列表的值
for( var i=0;i<names[ename].length;i++)
{
var newoption=new Option(names[ename][i],names[ename][i]);//创建新的选项
var film=document.f1.film;//得到下拉列表对象
film.options.add(newoption);//添加
}
}
</script>
  </head>

  <body>
  <form action="" name="f1">
  <select name="ename" onchange="select()">
  <option value="男">男</option>
  <option value="女">女</option>
  </select><br><br><br>
  <select name="film">
  <option value="运动">运动</option>
  </select>
  </form>
  </body>
</html>如何？你看看效果~不知你要的是动态的还是静态的，给你写了一个静态的
请问可以这么写吗？names['京','甘','浙']=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
names['海','空','济','兰','成','沈','广','南','北','军']=['A','B','C','D','K','L','M','N','O','R','V','Y'];
names['使']=['无'];