我有四个多选框,其中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);
}
}
这是小提琴:
答案 0 :(得分:1)
这里的问题是您使用window.onload
两次,
所以window.onload
事件只会执行最后传递的函数(在你的情况下是第二个函数),所以为了避免这种情况,只需为加载sel1
和sel11
选择声明两个分离函数,然后在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>