动态<select>内容的生成

如何根据前面一个<select></select>的选项情况来确定后面一个<select></select>的选项，

典型应用就是根据前面的省份，后面的显示其内的市区。

我自己写了一个，代码如下
function load(){
alert("1");
var c1 = document.getElementById('c1');
alert(c1);
var c2 = document.getElementById('c2');
c1.innerHTML='<input type="text"></input>';
c2.innerHTML='<select name="sex" onchange="iner()"><option value="男">男</option><option value="女">女</option></select>';

}
function iner(){
var c3 = document.getElementById('c3');
var sel = '<select name="jife">';
var opt = '<option value="喜欢"> 喜欢</option>';
var opt2 = '<option value="女">女</option>';
var selEnd = '</select>';
//c3.innerHTML='<select name="jife" ><option value="喜欢">喜欢</option><option value="女">女</option></select>';
//c3.innerHTML=sel + opt + opt2 + selEnd;
c3.innerHTML=sel;
c3.innnerHTML=opt;
c3.innerHTML=selEnd;
}


如果采用c3.innerHTML=sel + opt + opt2 + selEnd;可以显示。
{c3.innerHTML=sel;
c3.innnerHTML=opt;
c3.innerHTML=selEnd;}则不能显示。

不知何解。

在js中 opt += str;是否可行。

加个onchange方法吧

我觉得select标签不应该是动态生成的，在第一个select的onchange中根据选择的值在第二个select中用append增加option标签

是想要实现联动效果吗？
一般联动就两种方式：
1.通过程序生成js数组 然后通过onchange事件读取js数组内容向后面的下拉框添加内容
2.直接用Ajax,读取父级id然后通过数据库查询对应子元素写入后面的下拉框