有三个<select></select>，初始化时每个select都有三个值，分别是姓名，职位，公司名称。
发布网友
发布时间：2022-05-16 21:18
共3个回答
热心网友
时间：2023-09-10 23:43
var maps = [{ "text": "请选择", "value": "0" },
{ "text": "姓名", "value": "1" },
{ "text": "职位", "value": "2" },
{ "text": "公司名称", "value": "3"}];
//需要变更的下拉框 ID 集合
var sltIDs = ["slt1", "slt2", "slt3"];
//作为重置的选项值
var defaultValue = "0";
//需要变更的下拉框对象集合
var slts = new Array();
window.onload = function () {
for (var i = 0; i < sltIDs.length; i++) {
//将下拉框对象纳入集合
slts[slts.length] = document.getElementById(sltIDs[i]);
//为下拉框绑定“选项改变”事件
slts[slts.length - 1].onchange = function () { sltChange(this); };
//为下拉框绑定“获得焦点”事件
//便于记录下拉框‘改变前’的选择项
slts[slts.length - 1].onfocus = function () { sltFouce(this); };
//初始化下拉框的下拉选项
initItem(slts[slts.length - 1]);
}
}
function initItem(sltObj) {
for (var i = 0; i < maps.length; i++) {
//为下拉框添加 maps 中的选项
sltObj.options.add(new Option(maps[i].text, maps[i].value));
}
}
function sltFouce(sltObj) {
//将‘当前选中项’写入当前下拉框的自定义属性 lastValue 中
sltObj.setAttribute("lastValue", sltObj.value);
}
function sltChange(sltObj) {
if (sltObj.value == defaultValue) { //当选中值为‘重置选中值’时
//为其他下拉框添加‘原先选中’的选项
addItem(sltObj);
} else { //当选中值为需要‘删除其他下拉框相同选项’时
//删除其他下拉框‘当前选中’的选项
delItem(sltObj);
//如果原先选中的‘不是重置选中值’时
if (sltObj.getAttribute("lastValue") != defaultValue) {
//为其他下拉框添加‘原先选中’的选项
addItem(sltObj);
}
}
sltFouce(sltObj);
}
function addItem(sltObj) {
for (var i = 0; i < slts.length; i++) {
//不是当前触发事件的下拉框
if (slts[i].id != sltObj.id) {
//插入‘原先选中’的选项
insertItem(sltObj.getAttribute("lastValue"), slts[i]);
}
}
}
function delItem(sltObj) {
for (var i = 0; i < slts.length; i++) {
//当前触发事件的下拉框‘忽略’
if (slts[i].id == sltObj.id) {
continue;
}
for (var j = 0; j < slts[i].options.length; j++) {
//删除‘当前下拉框选中的项’
if (slts[i].options[j].value == sltObj.value) {
slts[i].options.remove(j);
break;
}
}
}
}
//按顺序插入项的算法，参数：原先选中的 Value， 需要插入该项的下拉框
function insertItem(insertValue, insertSlt) {
var valueItem = null;
var lastItem = null;
var itemIndex = insertSlt.options.length - 1;
for (var i = maps.length - 1; i > -1; i--) {
if (maps[i].value == insertValue) {
valueItem = maps[i];
if (lastItem == null) {
insertSlt.options.add(new Option(maps[i].text, maps[i].value));
} else {
insertSlt.options.add(new Option(valueItem.text, valueItem.value), ++itemIndex);
}
break;
}
if (maps[i].value == insertSlt.options[itemIndex].value) {
lastItem = maps[i];
itemIndex--;
}
}
}
<select id="slt1"></select>
<select id="slt2"></select>
<select id="slt3"></select>
思路是：
某个下拉框选中某项时，删除其他下拉框的相同选项
如果原先选中项，不是“请选择”时，则为其他下拉框添加原先的选中项
如果从某个选中项，改选为“请选择”时，也为其他下拉框添加原先的选中项
因为你这里有3个选项，又恰好，有3个下拉框，
一旦选择其中一项，按逻辑，就没有办法让其他下拉框包含这一项。
所以这里多加了一个重置项“请选择”。
如果你的选项数超过下拉框数，则可以不加“重置项”
但初始化的时候，你为各个下拉框赋默认值的时候就比较麻烦。
所以从代码角度，和友好度角度，还是加个“请选择”比较好
热心网友
时间：2023-09-10 23:44
热心网友
时间：2023-09-10 23:44
追答具体思路就是，每次选择时让当前select包含所有选项，再判断前面的select是否包含姓名等，包含就把当前select的姓名等去掉
