动态<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;是否可行。