Asp.net Javascript避免基于其他下拉列表的下拉列表中的重复值
Asp.net Javascript Avoid Duplicate values from DropDownList based On Other DropDownList
我有一个10下拉列表，我想避免重复，问题是，如果我选择下拉列表随机第7下拉列表我选择6，下面剩下的下拉列表将出现1，我想避免，我想要的是删除重复的值或可能设置为null，如果重复的值出现，这里是我的代码我希望你能帮助这里的javascriptenter图像描述......
<div>
<table>
<asp:DropDownList ID = "ddl1" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl2" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl3" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl4" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl5" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl6" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl7" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl8" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl9" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID = "ddl10" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
</table>
<asp:Button ID="btnSave" runat="server" Text="Save"
OnClick="btnSave_Click" />
<asp:Label ID="lblmsg" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
var Lists = [
document.getElementById("ddl1"),
document.getElementById("ddl2"),
document.getElementById("ddl3"),
document.getElementById("ddl4"),
document.getElementById("ddl5"),
document.getElementById("ddl6"),
document.getElementById("ddl7"),
document.getElementById("ddl8"),
document.getElementById("ddl9"),
document.getElementById("ddl10")
],
nbLists = Lists.length;
// Binds change events to each list
for (var iList = 0; iList < nbLists; iList++) {
Lists[iList].onchange = RemoveItems(iList);
}
function RemoveItems(iList) {
return function () {
var value = [];
// Add the selected items of all previous lists including the one changed
for (var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);
// Hide in all succeeding lists these items
for (var kList = iList + 1; kList < nbLists; kList++)
HideItems(kList, value);
}
}
// Hide items selected in previous lists in all next lists
function HideItems(iList, value) {
var nbOptions = Lists[iList].options.length,
nbValues = value.length,
found;
if (nbValues === 0) return;
for (var iOption = 0; iOption < nbOptions; iOption++) {
// Find if this element is present in the previous lists
found = false;
for (var iValue = 0; iValue < nbValues; iValue++) {
if (Lists[iList].options[iOption].text === value[iValue]) {
found = true;
break;
}
}
// If found, we hide it
if (found) {
Lists[iList].options[iOption].style.display = "none";
Lists[iList].options[iOption].selected = "";
}
// else we un-hide it (in case it was previously hidden)
else
Lists[iList].options[iOption].style.display = "";
}
}
</script>
为什么不首先使用CustomValidator的客户端验证?
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="There are duplicate values" ClientValidationFunction="noDuplicates"></asp:CustomValidator>
<script type="text/javascript">
function noDuplicates(oSrc, args) {
var ddl1 = document.getElementById('<%= ddl1.ClientID %>').selectedIndex;
var ddl2 = document.getElementById('<%= ddl2.ClientID %>').selectedIndex;
if (ddl1 != ddl2) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
</script>
相关文章：
- 从下拉列表中选择其他选项时激活文本框
- 如何使用其他下拉列表中未选择的选项填充下拉列表
- 我创建了一个下拉列表，以及如何显示所选项目的其他列数据
- 在选择其他下拉列表html和javascript araray的基础上，填充3个连续的下拉列表
- 如何在从所有下拉列表中选择一个时禁用其他下拉列表
- JQuery文本编辑器-在工具栏中添加其他下拉列表
- 如何根据其他下拉列表中的选择筛选下拉结果
- 如何将其附加到其他页面上的选择下拉列表中
- jQuery 根据其他下拉列表的选定值禁用其他下拉列表值
- 引导下拉列表 - 移动其他内容
- jQuery根据其他下拉列表的值选择下拉值
- 根据下拉列表中所选值的其他属性筛选本地剑道数据源
- 选择其他字段元素时如何重置选择选项下拉列表
- 删除其他下拉列表中的选定条目
- 未在选择标记下拉列表中选择以隐藏其他输入元素的嵌套控制器
- 单击其他元素(文本输入）时显示下拉列表
- 当用户使用 ASP.NET 从 Web 窗体中的“下拉列表列表”中选择“其他”时，文本框的显示方式
- 将 HTML 表转换为下拉列表(或以其他方式获取带有列的选择标记）
- 根据选择的其他下拉列表填充一个下拉列表
- 为什么下拉列表不会根据其他值进行更改
