如果只有3个select的话倒是正常,但是如果有4个以上的select就出错了
比如先在S1上选择BBB,然后再在S2上选择CCC,此时
S3和S4只能选择AAA,DDD,EEE
如果我再在S1上重新选择为DDD,此时S3、S4的可选项应该是 AAA,BBB,EEE
但是...下面的代码执行到这里的时候
S3的可选项就变为 AAA,EEE
而S4则为 AAA,BBB,EEE
我在sels[i].insertBefore(opt, sels[i].options[j]);前后各用alert来输出,确定它有执行了这句话啊...
不过不知道为什么...alert(opt.innerHTML)的时候,中间几次会变成空白...<!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>
<script type="text/javascript">
function reomveOption(sels, index, value){
for(var i = 0; i < sels.length; i++){
if( i != index ){
for(var j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value == value){
sels[i].remove(j);
break;
}
}
}
}
}function insertOption(sels, index, value){
var opt = document.createElement("option");
for(var k = 0; k < sels[index].options.length; k++) {
if(sels[index].options[k].value == value) {
opt.innerText = sels[index].options[k].text;
opt.text = sels[index].options[k].text;
opt.value = value;
break;
}
}
for(var i = 0; i < sels.length; i++) {
if( i != index ){
for(var j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value > value){
sels[i].insertBefore(opt, sels[i].options[j]);
break;
} else if(j == sels[i].options.length){
sels[i].appendChild(opt);
}
}
}
}
}function dselect(obj) {
var tb = document.getElementById("tb");
var sels = tb.getElementsByTagName("select");
for(var i = 0; i < sels.length; i++) {
if(sels[i].id == obj.id) {
if(obj.prevValue){
insertOption(sels, i, obj.prevValue);
obj.prevValue = null;
}
if(obj.selectedIndex >= 0){
reomveOption(sels, i, obj.prevValue = obj.options[obj.selectedIndex].value);
}
break;
}
}
}</script>
</head><body>
<table id="tb" cellpadding="5">
<tr>
<td>1</td>
<td>
<select id="S1" name="S1" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select id="S2" name="S2" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="S3" name="S3" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>4</td>
<td>
<select id="S4" name="S4" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
</table>
</body>
</html>
比如先在S1上选择BBB,然后再在S2上选择CCC,此时
S3和S4只能选择AAA,DDD,EEE
如果我再在S1上重新选择为DDD,此时S3、S4的可选项应该是 AAA,BBB,EEE
但是...下面的代码执行到这里的时候
S3的可选项就变为 AAA,EEE
而S4则为 AAA,BBB,EEE
我在sels[i].insertBefore(opt, sels[i].options[j]);前后各用alert来输出,确定它有执行了这句话啊...
不过不知道为什么...alert(opt.innerHTML)的时候,中间几次会变成空白...<!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>
<script type="text/javascript">
function reomveOption(sels, index, value){
for(var i = 0; i < sels.length; i++){
if( i != index ){
for(var j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value == value){
sels[i].remove(j);
break;
}
}
}
}
}function insertOption(sels, index, value){
var opt = document.createElement("option");
for(var k = 0; k < sels[index].options.length; k++) {
if(sels[index].options[k].value == value) {
opt.innerText = sels[index].options[k].text;
opt.text = sels[index].options[k].text;
opt.value = value;
break;
}
}
for(var i = 0; i < sels.length; i++) {
if( i != index ){
for(var j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value > value){
sels[i].insertBefore(opt, sels[i].options[j]);
break;
} else if(j == sels[i].options.length){
sels[i].appendChild(opt);
}
}
}
}
}function dselect(obj) {
var tb = document.getElementById("tb");
var sels = tb.getElementsByTagName("select");
for(var i = 0; i < sels.length; i++) {
if(sels[i].id == obj.id) {
if(obj.prevValue){
insertOption(sels, i, obj.prevValue);
obj.prevValue = null;
}
if(obj.selectedIndex >= 0){
reomveOption(sels, i, obj.prevValue = obj.options[obj.selectedIndex].value);
}
break;
}
}
}</script>
</head><body>
<table id="tb" cellpadding="5">
<tr>
<td>1</td>
<td>
<select id="S1" name="S1" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select id="S2" name="S2" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="S3" name="S3" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
<tr>
<td>4</td>
<td>
<select id="S4" name="S4" onchange="dselect(this)">
<option value="1" title="AAA">AAA</option>
<option value="2" title="BBB">BBB</option>
<option value="3" title="CCC">CCC</option>
<option value="4" title="DDD">DDD</option>
<option value="5" title="EEE">EEE</option>
</select>
</td>
</tr>
</table>
</body>
</html>
var _options = [];
var _selects = [];
function doThis(_this)
{
var theOptions = [];
var selectedOption = _this.options[_this.selectedIndex];
for(var i=0,o=null;o=_options[i];i++)
{
if( o.text == selectedOption.text)continue;
theOptions[theOptions.length] = new Option(o.text,o.value);
}
for(var i=0,o=null;o=_selects[i];i++)
{
if(o==_this) continue;
o.options.length = 0;
for(var j=0,op=null;op=theOptions[j];j++)
o.options.add(new Option(op.text,op.value));
}
}
window.onload=function(){
_selects =document.getElementsByTagName("select");
for(var i=0,o=null;o=_selects[0].options[i];i++)
{
_options[_options.length] = new Option(o.text,o.value);
}
}
</script>lz看这样可以不?
var txt;
var v;
for(var k = 0; k < sels[index].options.length; k++) {
if(sels[index].options[k].value == value) {
txt = sels[index].options[k].text;
v = value;
break;
}
}
for(var i = 0; i < sels.length; i++) {
if( i != index ){
for(var j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value > value){
sels[i].options.add(new Option(txt,v),(j+1));
break;
} else if(j == sels[i].options.length){
sels[i].appendChild(opt);
}
}
}
}
}
用add方法替代insertBefore
而且add还一定要用new Option(text, value)的方法来添加option,用createElement还不行哦...提示参数错误...
insertOption必须修改成下面这样,不然如果选择最后一个option的话,则无法再添加回来function insertOption(sels, index, value){
var txt;
var v;
var j;
for(var k = 0; k < sels[index].options.length; k++) {
if(sels[index].options[k].value == value) {
txt = sels[index].options[k].text;
v = value;
break;
}
}
for(var i = 0; i < sels.length; i++) {
if( i != index ){
for(j = 0; j < sels[i].options.length; j++){
if(sels[i].options[j].value > value){
sels[i].options.add(new Option(txt,v),(j));
sels[i].options[j].title = txt;
break;
}
}
if(j >= sels[i].options.length) {
sels[i].options.add(new Option(txt,v),sels[i].options.length);
sels[i].options[sels[i].options.length-1].title = txt;
}
}
}
}