我有四个多选框,其中 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 :
最佳答案
这里的问题是你使用了 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>
关于javascript - 根据其他两个多选中的选择填充两个多选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48092055/