如何实现两个select下拉列表中的元素同步的问题

Question

      现在在jsp页面A中存在连个下拉列表框a、b，a中存放各种产品，b中存放与a中产品对应的产品版本（产品和版本的信息事先存储在数据库中），该页面中还存在一些其他需要用户填写的信息，用户填写完毕后一起提交到其他页面。
      问题是如何实现在用户选择产品信息时，版本跟着有相应的变化。我自己想到的有两种解决办法：
      一、在每次用户改变产品信息的时候重新读一次数据库，将对应的版本信息取出来。但是如果这样实现的话页面需要跳转到servlet再跳转回来，页面中的其他信息也要作为参数传递出去再传递回来，而且这要有一个提交到servlet的过程，我的这个页面信息填写完后还要提交到其他页面，这就产生了一个页面提交到两个页面的冲突。所以我认为用这种方式实现不了。
      二、在页面加载前一次性将产品和版本的信息取出来，传递到这个页面，在用户选择产品时用JavaScript语句控制版本的刷新，但是这又涉及到采用什么样的数据结构将数据传递过来的问题。和如何将数据存储进这样的数据结构的问题。
假定我们用一个类productionInfo来表示产品信息（产品名String、产品版本int【】），那么传递信息的数据类型就应该是一个ArrayList<production>现在如何将产品信息传递到这个list中呢，1）产品名的值是不能重复的，所以在添加产品名的时候需要验证，2）同一产品的产品版本也是不允许重复的所以在添加产品版本的时候还是要进行验证。
    这个数据添加的过程我想了好久都没想明白，希望有高手能够帮帮忙。说清思路就可以。
     

Answer 1

function changeCity()
{
     var cityList = new Array();     cityList['山东省'] ＝ ['济南', '青岛', '东营'];
     cityList['四川省'] ＝ ['成都', '乐山', '凉山'];
     cityList['河南省'] ＝ ['郑州', '安阳', '洛阳'];     var pIndex = document.myform.selProvince.value;
     var newOption1;
     document.myform.selCity.options.length = 0;
     for(var j in cityList[])
     {
            newOption1 = new Option(cityList[pIndex][j],  cityList[pIndex][j]);
            document.myform.optins.add(newOption1);
     }
}onChange = "changeCity()";这是用JS实现省市的联动！

Answer 2

用ajax实现级联菜单，网上搜下，例子很多的

Answer 3

一般用js或者ajax，可以很帮忙的实现。