代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//选项内容：
var questions=['你的小学叫什么名字？','你最崇拜的人物是谁？','你最喜欢的花名字叫什么？','你父亲的职业是？','你父亲的姓名？','你高中班主任的名字？'];
//当前被选中的值：
var currentValue=new Array();
var selectobj=['q1','q2','q3'];
function $(id){
return document.getElementById(id);
}
function init(){
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
var oOption = document.createElement("option");
var text="--请选择--"
var value="";
oOption.text=text;
oOption.value=value;
$(selectobj[j]).add(oOption);
for(var i=0;i<questions.length;i++){
var oOption = document.createElement("option");
oOption.text=questions[i];
oOption.value=questions[i];
$(selectobj[j]).add(oOption);
}
}
}
function collectVlue(){
var currentobj=null;
for(var j=0;j<selectobj.length;j++){
currentobj=$(selectobj[j]);
currentValue[j]=currentobj.value;
}
}
function change(i){
if(i!=10000){
collectVlue();
}
//document.write(currentValue[0]);
//document.write(currentValue[1]);
//document.write(currentValue[2]);
//return;
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
var oOption = document.createElement("option");
var text="--请选择--"
var value="";
oOption.text=text;
oOption.value=value;
$(selectobj[j]).add(oOption);
for(var i=0;i<questions.length;i++){
var available=true;//选项是否被占用
for(var k=0;k<currentValue.length;k++)
{
if(questions[i]==currentValue[k]&&j!=k){
available=false;
break;
}
}
if(available){
var oOption = document.createElement("option");
oOption.text=questions[i];
oOption.value=questions[i];
$(selectobj[j]).add(oOption);
}
}
//选中项：
//$(selectobj[j]).value=currentValue[j];
setSelect(selectobj[j],currentValue[j]);
}
}
//使select选中特定值：
function setSelect(id,value){
for(var i=0;i<$(id).options.length;i++){
if($(id).options[i].value==value){
$(id).selectedIndex=i;
break;
}
}
}
</script>
<select id="q1" onchange="change(0);">
<option></option>
</select>
<select id="q2" onchange="change(1);">
<option></option>
</select>
<select id="q3" onchange="change(2);">
<option></option>
</select>
</body>
<script type="text/javascript">
//init();
currentValue=['你最喜欢的花名字叫什么？','你父亲的职业是？'];
change(10000);
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//选项内容：
var questions=['你的小学叫什么名字？','你最崇拜的人物是谁？','你最喜欢的花名字叫什么？','你父亲的职业是？','你父亲的姓名？','你高中班主任的名字？'];
//当前被选中的值：
var currentValue=new Array();
var selectobj=['q1','q2','q3'];
function $(id){
return document.getElementById(id);
}
function init(){
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
var oOption = document.createElement("option");
var text="--请选择--"
var value="";
oOption.text=text;
oOption.value=value;
$(selectobj[j]).add(oOption);
for(var i=0;i<questions.length;i++){
var oOption = document.createElement("option");
oOption.text=questions[i];
oOption.value=questions[i];
$(selectobj[j]).add(oOption);
}
}
}
function collectVlue(){
var currentobj=null;
for(var j=0;j<selectobj.length;j++){
currentobj=$(selectobj[j]);
currentValue[j]=currentobj.value;
}
}
function change(i){
if(i!=10000){
collectVlue();
}
//document.write(currentValue[0]);
//document.write(currentValue[1]);
//document.write(currentValue[2]);
//return;
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
var oOption = document.createElement("option");
var text="--请选择--"
var value="";
oOption.text=text;
oOption.value=value;
$(selectobj[j]).add(oOption);
for(var i=0;i<questions.length;i++){
var available=true;//选项是否被占用
for(var k=0;k<currentValue.length;k++)
{
if(questions[i]==currentValue[k]&&j!=k){
available=false;
break;
}
}
if(available){
var oOption = document.createElement("option");
oOption.text=questions[i];
oOption.value=questions[i];
$(selectobj[j]).add(oOption);
}
}
//选中项：
//$(selectobj[j]).value=currentValue[j];
setSelect(selectobj[j],currentValue[j]);
}
}
//使select选中特定值：
function setSelect(id,value){
for(var i=0;i<$(id).options.length;i++){
if($(id).options[i].value==value){
$(id).selectedIndex=i;
break;
}
}
}
</script>
<select id="q1" onchange="change(0);">
<option></option>
</select>
<select id="q2" onchange="change(1);">
<option></option>
</select>
<select id="q3" onchange="change(2);">
<option></option>
</select>
</body>
<script type="text/javascript">
//init();
currentValue=['你最喜欢的花名字叫什么？','你父亲的职业是？'];
change(10000);
</script>
</html>
应用效果：
把上面的js放到ff下遇到了兼容性问题，会报错，网上查了相关资料，如下：
兼容IE和FF的Javascript动态添加Select控件的Option选项
看了很多Javascript的书籍，发现对Select可以使用add方法添加Option选项。
selectObj.add(new Option("Label", "Value"));
但是add方法好像只在IE下好用。现在提供一个通用的方法：
selectObj.options[selectObj.length] = new Option("Label", "Value");
另外如果想还想使用add方法，可以写成如下格式：
selectObj.add(new Option("Label", "Value"), null);
请注意，在IE6及IE7下请使用不带null参数的add方法，在FF下请使用带null参数的方法，IE8下带不带都可以。
很奇怪为什么一定要加null，我猜测add方法里一定使用了'=== null'来判断第二的参数或者没有对参数数组的长度做验证。
于是对先前的版本进行升级、优化：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//选项内容：
var questions=['你的小学叫什么名字？','你最崇拜的人物是谁？','你最喜欢的花名字叫什么？','你父亲的职业是？','你父亲的姓名？','你高中班主任的名字？'];
//当前被选中的值：
var currentValue=new Array();
var selectobj=['q1','q2','q3'];
function $(id){
return document.getElementById(id);
}
function init(){
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
addOption(selectobj[j],'--请选择--','');
for(var i=0;i<questions.length;i++){
addOption(selectobj[j],questions[i],questions[i]);
}
}
}
function collectVlue(){
var currentobj=null;
for(var j=0;j<selectobj.length;j++){
currentobj=$(selectobj[j]);
currentValue[j]=currentobj.value;
}
}
function change(i){
if(i!=10000){
collectVlue();
}
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
addOption(selectobj[j],'--请选择--','');
for(var i=0;i<questions.length;i++){
var available=true;//选项是否被占用
for(var k=0;k<currentValue.length;k++)
{
if(questions[i]==currentValue[k]&&j!=k){
available=false;
break;
}
}
if(available){
//添加选项：
addOption(selectobj[j],questions[i],questions[i]);
}
}
//选中项：
//$(selectobj[j]).value=currentValue[j];
setSelect(selectobj[j],currentValue[j]);
}
}
//使select选中特定值：
function setSelect(id,value){
for(var i=0;i<$(id).options.length;i++){
if($(id).options[i].value==value){
$(id).selectedIndex=i;
break;
}
}
}
//给select添加值：
function addOption(id,text,value){
var oOption = document.createElement("option");
oOption.text=text;
oOption.value=value;
try {
$(id).add(oOption); //这个在IE下可以
} catch(ex) {
$(id).add(oOption,null);//这个在FF下可以
}
}
</script>
<select id="q1" onchange="change(0);">
<option></option>
</select>
<select id="q2" onchange="change(1);">
<option></option>
</select>
<select id="q3" onchange="change(2);">
<option></option>
</select>
</body>
<script type="text/javascript">
//init();
currentValue=['你最喜欢的花名字叫什么？','你父亲的职业是？'];
change(10000);
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//选项内容：
var questions=['你的小学叫什么名字？','你最崇拜的人物是谁？','你最喜欢的花名字叫什么？','你父亲的职业是？','你父亲的姓名？','你高中班主任的名字？'];
//当前被选中的值：
var currentValue=new Array();
var selectobj=['q1','q2','q3'];
function $(id){
return document.getElementById(id);
}
function init(){
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
addOption(selectobj[j],'--请选择--','');
for(var i=0;i<questions.length;i++){
addOption(selectobj[j],questions[i],questions[i]);
}
}
}
function collectVlue(){
var currentobj=null;
for(var j=0;j<selectobj.length;j++){
currentobj=$(selectobj[j]);
currentValue[j]=currentobj.value;
}
}
function change(i){
if(i!=10000){
collectVlue();
}
for(var j=0;j<selectobj.length;j++){
//清除原先选项：
$(selectobj[j]).options.length=0;
//添加选项：
addOption(selectobj[j],'--请选择--','');
for(var i=0;i<questions.length;i++){
var available=true;//选项是否被占用
for(var k=0;k<currentValue.length;k++)
{
if(questions[i]==currentValue[k]&&j!=k){
available=false;
break;
}
}
if(available){
//添加选项：
addOption(selectobj[j],questions[i],questions[i]);
}
}
//选中项：
//$(selectobj[j]).value=currentValue[j];
setSelect(selectobj[j],currentValue[j]);
}
}
//使select选中特定值：
function setSelect(id,value){
for(var i=0;i<$(id).options.length;i++){
if($(id).options[i].value==value){
$(id).selectedIndex=i;
break;
}
}
}
//给select添加值：
function addOption(id,text,value){
var oOption = document.createElement("option");
oOption.text=text;
oOption.value=value;
try {
$(id).add(oOption); //这个在IE下可以
} catch(ex) {
$(id).add(oOption,null);//这个在FF下可以
}
}
</script>
<select id="q1" onchange="change(0);">
<option></option>
</select>
<select id="q2" onchange="change(1);">
<option></option>
</select>
<select id="q3" onchange="change(2);">
<option></option>
</select>
</body>
<script type="text/javascript">
//init();
currentValue=['你最喜欢的花名字叫什么？','你父亲的职业是？'];
change(10000);
</script>
</html>
