javascript - 根据其他两个多选中的选择填充两个多选

Question

我有四个多选框，其中 sel1、sel2、sel11、sel22 将在 sel1 的基础上填充 sel2 的选项，在 sel11 的基础上填充 sel22 的选项。

问题是只有像 sel1,sel2 这样的组有效，反之亦然

这是我的代码:

<select multiple="multiple" size="11" id="sel1"></select>
<select id="sel2" multiple="multiple" size="11"></select>

<select multiple="multiple" size="11" id="sel11"></select>
<select id="sel22" multiple="multiple" size="11"></select>


var selOptions = [
['Department 1', 'Name 1', 'Name 2', 'Name 3'],
['Department 2', 'Name 2', 'Name 4', 'Name 5'],
['Department 3', 'Name 1', 'Name 4', 'Name 6']
];

function setSel2Optionss(obj) {
oSel2.options.length = 0;
if (obj.selectedIndex == 0) {
    return;
}
for (k = 0; k < obj.options.length; k++) {
    if (obj.options[k].selected) {
        for (i = 0; i < selOptions.length; i++) {
            if (obj.options[k].value == selOptions[i][0]) {
                for (j = 1; j < selOptions[i].length; j++) {
                    oSel2.options[oSel2.options.length] = new 
Option(selOptions[i][j], selOptions[i][j], false, false);
                }
                i = selOptions.length;
            }
        }
    }
}
}

window.onload = function() {
oSel1 = document.getElementById('sel1');
oSel2 = document.getElementById('sel2');

oSel1.options[oSel1.options.length] = new Option('Select a department', '', false, false);
for (i = 0; i < selOptions.length; i++) {
    oSel1.options[oSel1.options.length] = new Option(selOptions[i][0], 
selOptions[i][0], false, false);
}
oSel1.onchange = function() {
    setSel2Optionss(this);
}
}





var selOptions2 = [
            ['Desktop','Desktop'],
            ['Other','Other'],
            ['Phone','iPhone','iPod'],
            ['Tablet','ipad','Amazon Kindle'],
            ['TV','Other','Apple TV']
            ];

function setsel22Optionss(obj) {
osel22.options.length = 0;
if (obj.selectedIndex == 0) {
    return;
}
for (k = 0; k < obj.options.length; k++) {
    if (obj.options[k].selected) {
        for (i = 0; i < selOptions2.length; i++) {
            if (obj.options[k].value == selOptions2[i][0]) {
                for (j = 1; j < selOptions2[i].length; j++) {
                    osel22.options[osel22.options.length] = new 
Option(selOptions2[i][j], selOptions2[i][j], false, false);
                }
                i = selOptions2.length;
            }
        }
    }
}
}

window.onload = function() {
osel11 = document.getElementById('sel11');
osel22 = document.getElementById('sel22');

osel11.options[osel11.options.length] = new Option('Select a department', '', false, false);
for (i = 0; i < selOptions2.length; i++) {
    osel11.options[osel11.options.length] = new Option(selOptions2[i][0], 
selOptions2[i][0], false, false);
}
osel11.onchange = function() {
    setsel22Optionss(this);
}
}

这是 fiddle :

http://jsfiddle.net/Kw5Km/16/

Answer 1

这里的问题是你使用了 window.onload 两次，所以 window.onload 事件只会执行最后传递的函数(在你的情况下是第二个函数)，所以为了避免这种情况，只需声明两个用于加载 sel1 的分离函数和 sel11 select ，然后在 window.load 函数上调用它们

见下面的片段:

var selOptions = [
    ['Department 1', 'Name 1', 'Name 2', 'Name 3'],
    ['Department 2', 'Name 2', 'Name 4', 'Name 5'],
    ['Department 3', 'Name 1', 'Name 4', 'Name 6']
    ];

function setSel2Optionss(obj) {
    oSel2.options.length = 0;
    if (obj.selectedIndex == 0) {
        return;
    }
    for (k = 0; k < obj.options.length; k++) {
        if (obj.options[k].selected) {
            for (i = 0; i < selOptions.length; i++) {
                if (obj.options[k].value == selOptions[i][0]) {
                    for (j = 1; j < selOptions[i].length; j++) {
                        oSel2.options[oSel2.options.length] = new Option(selOptions[i][j], selOptions[i][j], false, false);
                    }
                    i = selOptions.length;
                }
            }
        }
    }
}



function loadForSel1and2() {
    oSel1 = document.getElementById('sel1');
    oSel2 = document.getElementById('sel2');

    oSel1.options[oSel1.options.length] = new Option('Select a department', '', false, false);
    for (i = 0; i < selOptions.length; i++) {
        oSel1.options[oSel1.options.length] = new Option(selOptions[i][0], selOptions[i][0], false, false);
    }
    oSel1.onchange = function() {
        setSel2Optionss(this);
    }
}




var selOptions2 = [
		 		['Desktop','Desktop'],
		 		['Other','Other'],
		 		['Phone','iPhone','iPod'],
				['Tablet','ipad','Amazon Kindle'],
				['TV','Other','Apple TV']
		 		];

function setsel22Optionss(obj) {
    osel22.options.length = 0;
    if (obj.selectedIndex == 0) {
        return;
    }
    for (k = 0; k < obj.options.length; k++) {
        if (obj.options[k].selected) {
            for (i = 0; i < selOptions2.length; i++) {
                if (obj.options[k].value == selOptions2[i][0]) {
                    for (j = 1; j < selOptions2[i].length; j++) {
                        osel22.options[osel22.options.length] = new Option(selOptions2[i][j], selOptions2[i][j], false, false);
                    }
                    i = selOptions2.length;
                }
            }
        }
    }
}

function loadForSel11and22() {
    osel11 = document.getElementById('sel11');
    osel22 = document.getElementById('sel22');

    osel11.options[osel11.options.length] = new Option('Select a department', '', false, false);
    for (i = 0; i < selOptions2.length; i++) {
        osel11.options[osel11.options.length] = new Option(selOptions2[i][0], selOptions2[i][0], false, false);
    }
    osel11.onchange = function() {
        setsel22Optionss(this);
    }
}


window.onload = function() {
	loadForSel1and2();
  loadForSel11and22();
}

select {
    width:150px;
}

<select multiple="multiple" size="11" id="sel1"></select>
<select id="sel2" multiple="multiple" size="11"></select>

<select multiple="multiple" size="11" id="sel11"></select>
<select id="sel22" multiple="multiple" size="11"></select>