N级唯一选择下拉列表框. 作者:梅雪香 code by meixx

这问题太多太多了，再发一个吧<SCRIPT LANGUAGE="JavaScript">//<![CDATA[// Forbes Pu 2006-1-15
// Please keep copyright appeared.var aMatrix2 = [
[1, 0, "我"],
[2, 0, "你"],
[3, 1, "很"],
[4, 1, "不"],
[5, 2, "挺"],
[6, 2, "不"],
[7, 3, "喜欢"],
[8, 4, "讨厌"],
[9, 5, "爱"],
[10, 6, "讨厌"],
[11, 7, "你"],
[12, 8, "你"],
[13, 9, "我"],
[14, 10, "我"]
];// Demo: [ID, ParentID, Text, Value]function attachSelect(sInit, aSelect, aDataSet, aDef) {
function IChange(index) {
var pid = sInit;
var cnt = 0;
var sl = aSelect[index];
if (index > 0) pid = aSelect[index - 1].options[aSelect[index - 1].selectedIndex].id;
with (sl) {
length = 0;
for (var i = 0; i < aDataSet.length; i++) {
if (aDataSet[i][1].toString() == String(pid)) {
var op = new Option(aDataSet[i][2], aDataSet[i][3]||aDataSet[i][2], false, (aDataSet[i][3]||aDataSet[2]) == (aDef||[])[index] || cnt==0);
op.id = aDataSet[i][0];
options[cnt++] = op;
}
}
if (cnt == 0) {
var $op = new Option("--", null, false, true);
$op.id = "$NULL";//hard code
options[0] = $op;
}
if (++index < aSelect.length) IChange(index);
} 
}
for (var i = 0; i < aSelect.length - 1; i++) 
eval("aSelect[" + i + "].onchange=function(){ IChange(" + (i+1) + ") }");
IChange(0);
aDef = [];
}var ByID = function(id){ return(document.getElementById(id) || document.all(id)) };
onload = function() { 
attachSelect(0, [ByID("a"), ByID("b"), ByID("c"), ByID("d")], aMatrix2);
};
//]]>
</SCRIPT>
<form>
<select id="a">--</select>
<select id="b">--</select>
<select id="c">--</select>
<select id="d">--</select>
</form>

解决方案 »

  1.   

    需求：选多个，并且要唯一，还得有先后次序。
    类似需求的解决方案，
    楼主的方法是：“先选为大，后者不能选”；
    也可以用以下方法：“后选为大，取消先选”。（代码附后）不过，不支持以上两方案
    而建议用：
    “一个备选multiple-select,一个选中的multiple-select,两个左右移动，可以对右边的选项排序。”
    <html>
    <head>
    <script language="JavaScript">var allObjs=document.getElementsByName("dlt");function changeFun(currentObj)
    {
    for(var i=0;i<allObjs.length;i++)
    {
    if(allObjs[i].value==currentObj.value && allObjs[i]!=currentObj)
    allObjs[i].value="";
    }
    }
    </script>
    </head>
    <body> <select name="dlt" onchange="changeFun(this);">
    <option value=""></option>
    <option value="1">11111111</option>
    <option value="2">22222222</option>
    <option value="3">33333333</option>
    <option value="4">44444444</option>
    <option value="5">55555555</option>
    <option value="6">66666666</option>
    <option value="7">77777777</option>
    <option value="8">88888888</option>
    <option value="9">99999999</option>
    </select>
    <select name="dlt" onchange="changeFun(this);">
    <option value=""></option>
    <option value="1">11111111</option>
    <option value="2">22222222</option>
    <option value="3">33333333</option>
    <option value="4">44444444</option>
    <option value="5">55555555</option>
    <option value="6">66666666</option>
    <option value="7">77777777</option>
    <option value="8">88888888</option>
    <option value="9">99999999</option>
    </select>
    <select name="dlt" onchange="changeFun(this);">
    <option value=""></option>
    <option value="1">11111111</option>
    <option value="2">22222222</option>
    <option value="3">33333333</option>
    <option value="4">44444444</option>
    <option value="5">55555555</option>
    <option value="6">66666666</option>
    <option value="7">77777777</option>
    <option value="8">88888888</option>
    <option value="9">99999999</option>
    </select>
    <select name="dlt" onchange="changeFun(this);">
    <option value=""></option>
    <option value="1">11111111</option>
    <option value="2">22222222</option>
    <option value="3">33333333</option>
    <option value="4">44444444</option>
    <option value="5">55555555</option>
    <option value="6">66666666</option>
    <option value="7">77777777</option>
    <option value="8">88888888</option>
    <option value="9">99999999</option>
    </select>
    </body>
    </html>
      

  2.   

    报告：
    在firefox中出现"错误： oHtml has no properties
    源文件：file:///D:/test.htm
    行：56"
    完毕
      

  3.   

    谢谢大梅对探索精神的支持,也谢谢大梅对我的代码的否定.to fason : 你的代码的用处和我的不一样的.
        我的代码是用来从一个集合中选出一个无重复元素的子集.
        比如,有N个值班人员,但每天只有两个值班,可以用这个来选择.还有类似的情况.功能与两个列表框左右移动的差不多.看个人喜好了.
       
    to  JK_10000(JK) : 这段代码就支持你列出的两种模式,可以自己设置,但我没有这个设置放到参数里.如上所述,功能与两个列表框左右移动差不多,只是看个人喜欢用哪一个.我觉得两个个有用处,如果待选项特别多可以用左右选择的,如果较少那么使用这个应该方便些.to jun573(军): 此代码只支持IE,我的开发环境是IE6.0.2900.2180
      

  4.   

    zhaoxiaoyang(梅雪香@深圳) ( ) 信誉：100  2006-01-19 22:27:00  得分: 0   
    JK_10000(JK) : 这段代码就支持你列出的两种模式,可以自己设置
    --------
    ---
    眼拙，没看出是怎么支持（第二种方案）的。
    另外，个人看法：html代码如果能直接生成的话，就不要用js去生成。
      尤其是form的element，如果是由js生成的话，在后退时就失去了上次选中的值，给用户带来不便
      

  5.   

    this.mode = "dissel";  //dissel:已经有选项的不可以再选   chgsel :强制改变选择,如果已经有相同选项就一起改变
      

  6.   


    另外，个人看法：html代码如果能直接生成的话，就不要用js去生成。
    尤其是form的element，如果是由js生成的话，在后退时就失去了上次选中的值，给用户带来不便恐怕也不能这么说，有时候就必须使用js生成html代码，后退的时候可以单独保存处理，不会丢失，也不是很麻烦。
    比如动态添加行到table中，当提交这个table所在form的时候如果出错就需要回退，此时可以把table的innerHTML单独保存（可以放到全局变量中也可以在提交的时候放到后台，需要的时候再取出来），需要显示的时候再取出来即可。
      

  7.   

    "..把table的innerHTML单独保存（可以放到全局变量中也可以在提交的时候放到后台，需要的时候再取出来..."----
    “可以放到全局变量中也可以在提交的时候放到后台”这样做太麻烦，可以这样做，
    直接在onbeforeunload时放在一个隐藏的textarea里，后退时如果要用的话就直接从这个textarea里取.