Jquery 禁用 Asp.net 核心中的选定选项无法正常工作
Jquery disable selected option in Asp.net core not working properly
在我的项目中，我有一个 table 带有添加新行的按钮。当我选择一个选项时，每一行都有一个 select 框，它应该在所有其他 select 框中禁用，包括新选项。当我在这里尝试此代码时 enter link description here
有用。但在 Asp.net 核心中它并不完全有效它只适用于第一个 select 框选项。
这是我在 Asp.net Core 中的代码，我对其进行了修改但仍然无法正常工作 select 框 selected 选项已更新和禁用
为什么相同的代码在 visual studio 之外和在 visual studio 上工作方式不同>
<table id="empData">
<thead>
<tr>
<th>Location</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody id="UserLocation">
<tr>
<td>
<select id="select1" asp-for="@Model.Location" asp-
items="Html.GetEnumSelectList<Location>()" class="stockCode form-control"
name="locations">
</select>
</td>
<td>
<select id="select2" asp-for="@Model.roles" asp-items="ViewBag.Rolelist"
class="form-control" name="role">
</select>
</td>
<td><Button onClick='deleteRow(this)' class="kx-repeatable" /></td>
</tr>
</tbody>
</table>
<button onClick="addNewRow()" id="AddNew">Add New Row</button>
Jquery代码
$(document).ready(function () {
addNewRow = function () {
var newRow = $("#empData tbody tr").first().clone()
$("#UserLocation").append(newRow);
}
deleteRow = function (element) {
$(element).parent().parent().remove();
}
});
$(document).ready(function () {
var masterList = [];
var selectedList = [];
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} !=
{x:20}
return false;
}
}
return true;
}
function createMasterList() {
masterList = [];
$('#select1\(1\)').children('#select1 option').each(function () {
masterList.push($(this).val());
});
masterList.shift(); //remove blank value
}
createMasterList(); //used to check if all dropdown values have been selected
function updateSelectedList() {
selectedList = [];
var selectedValue;
$('#empData #select1').each(function () {
selectedValue = $(this).find('#select1 option:selected').val();
if (selectedValue != "" && $.inArray(selectedValue, selectedList) == "-1") {
selectedList.push(selectedValue);
}
});
}
//disable the dropdown items that have already been selected
function disableAlreadySelected() {
$('#select1 > option:selected').each(function () {
if ($.inArray(this.value, selectedList) != "-1") {
$(this).attr("disabled", "disabled");
} else {
$(this).attr("disabled", "");
}
});
}
//If all values have been selected, don't let the user add more rows
function hideAddButtonIfDone() {
masterList.sort();
selectedList.sort();
if (masterList.equals(selectedList)) {
console.log("lists equal, hiding add button");
$('#empData #AddNew').hide();
}
else {
console.log("lists not equal, showing add button");
$('#empData #AddNew').show();
}
}
$('#empData').on('change', '.stockCode', function () {
setTimeout(function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
}, 0.1);
});
//when a new table row is added, disable the dropdown options that have already been
selected
$('#empData #AddNew').on('click', disableAlreadySelected);
//when a table row is removed, update all dropdowns (the removed row's dropdown option
will be re-enabled
//in remaining dropdowns
$('#empData').on('DOMNodeRemoved', '.kx-repeatable > tr', function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
});
});
我认为这是因为 id 不是唯一的，当添加新行时，它会创建具有相同 id 的选择，因此无法找到并正确使用该元素 id.Here 是一个工作演示：
<table id="empData">
<thead>
<tr>
<th>Location</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody id="UserLocation">
<tr>
<td>
<select asp-for="@Model.Location" asp-
items="Html.GetEnumSelectList<Location>()" class="stockCode form-control"
name="locations">
</select>
</td>
<td>
<select asp-for="@Model.roles" asp-items="ViewBag.Rolelist"
class="form-control" name="role">
</select>
</td>
<td><Button onClick='deleteRow(this)' class="kx-repeatable" /></td>
</tr>
</tbody>
</table>
<button onClick="addNewRow()" id="AddNew">Add New Row</button>
js:
$(document).ready(function () {
addNewRow = function () {
var newRow = $("#empData tbody tr").first().clone()
$("#UserLocation").append(newRow);
disableAlreadySelected();
}
deleteRow = function (element) {
$(element).parent().parent().remove();
}
var masterList = [];
var selectedList = [];
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} !=
{ x: 20 }
return false;
}
}
return true;
}
function createMasterList() {
masterList = [];
$('#select1\(1\)').children('#select1 option').each(function () {
masterList.push($(this).val());
});
masterList.shift(); //remove blank value
}
createMasterList(); //used to check if all dropdown values have been selected
function updateSelectedList() {
selectedList = [];
var selectedValue;
$('#empData .stockCode').each(function (index,element) {
selectedValue = $(element).find('option:selected').val();
if (selectedValue != "" && $.inArray(selectedValue, selectedList) == "-1") {
selectedList.push(selectedValue);
}
});
}
//disable the dropdown items that have already been selected
function disableAlreadySelected() {
$('.stockCode > option').each(function (index,element) {
if ($.inArray(element.value, selectedList) != "-1") {
$(element).attr("disabled", "disabled");
} else {
$(element).removeAttr("disabled");
}
});
}
//If all values have been selected, don't let the user add more rows
function hideAddButtonIfDone() {
masterList.sort();
selectedList.sort();
if (masterList.equals(selectedList)) {
console.log("lists equal, hiding add button");
$('#empData #AddNew').hide();
}
else {
console.log("lists not equal, showing add button");
$('#empData #AddNew').show();
}
}
$('#empData').on('change', '.stockCode', function () {
setTimeout(function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
}, 0.1);
});
//when a new table row is added, disable the dropdown options that have already been selected
//$('#empData #AddNew').on('click', disableAlreadySelected);
//when a table row is removed, update all dropdowns (the removed row's dropdown option
//will be re - enabled
//in remaining dropdowns
$('#empData').on('DOMNodeRemoved', '.kx-repeatable > tr', function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
});
});
结果：
在我的项目中，我有一个 table 带有添加新行的按钮。当我选择一个选项时，每一行都有一个 select 框，它应该在所有其他 select 框中禁用，包括新选项。当我在这里尝试此代码时 enter link description here 有用。但在 Asp.net 核心中它并不完全有效它只适用于第一个 select 框选项。
这是我在 Asp.net Core 中的代码，我对其进行了修改但仍然无法正常工作 select 框 selected 选项已更新和禁用
为什么相同的代码在 visual studio 之外和在 visual studio 上工作方式不同>
<table id="empData">
<thead>
<tr>
<th>Location</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody id="UserLocation">
<tr>
<td>
<select id="select1" asp-for="@Model.Location" asp-
items="Html.GetEnumSelectList<Location>()" class="stockCode form-control"
name="locations">
</select>
</td>
<td>
<select id="select2" asp-for="@Model.roles" asp-items="ViewBag.Rolelist"
class="form-control" name="role">
</select>
</td>
<td><Button onClick='deleteRow(this)' class="kx-repeatable" /></td>
</tr>
</tbody>
</table>
<button onClick="addNewRow()" id="AddNew">Add New Row</button>
Jquery代码
$(document).ready(function () {
addNewRow = function () {
var newRow = $("#empData tbody tr").first().clone()
$("#UserLocation").append(newRow);
}
deleteRow = function (element) {
$(element).parent().parent().remove();
}
});
$(document).ready(function () {
var masterList = [];
var selectedList = [];
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} !=
{x:20}
return false;
}
}
return true;
}
function createMasterList() {
masterList = [];
$('#select1\(1\)').children('#select1 option').each(function () {
masterList.push($(this).val());
});
masterList.shift(); //remove blank value
}
createMasterList(); //used to check if all dropdown values have been selected
function updateSelectedList() {
selectedList = [];
var selectedValue;
$('#empData #select1').each(function () {
selectedValue = $(this).find('#select1 option:selected').val();
if (selectedValue != "" && $.inArray(selectedValue, selectedList) == "-1") {
selectedList.push(selectedValue);
}
});
}
//disable the dropdown items that have already been selected
function disableAlreadySelected() {
$('#select1 > option:selected').each(function () {
if ($.inArray(this.value, selectedList) != "-1") {
$(this).attr("disabled", "disabled");
} else {
$(this).attr("disabled", "");
}
});
}
//If all values have been selected, don't let the user add more rows
function hideAddButtonIfDone() {
masterList.sort();
selectedList.sort();
if (masterList.equals(selectedList)) {
console.log("lists equal, hiding add button");
$('#empData #AddNew').hide();
}
else {
console.log("lists not equal, showing add button");
$('#empData #AddNew').show();
}
}
$('#empData').on('change', '.stockCode', function () {
setTimeout(function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
}, 0.1);
});
//when a new table row is added, disable the dropdown options that have already been
selected
$('#empData #AddNew').on('click', disableAlreadySelected);
//when a table row is removed, update all dropdowns (the removed row's dropdown option
will be re-enabled
//in remaining dropdowns
$('#empData').on('DOMNodeRemoved', '.kx-repeatable > tr', function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
});
});
我认为这是因为 id 不是唯一的，当添加新行时，它会创建具有相同 id 的选择，因此无法找到并正确使用该元素 id.Here 是一个工作演示：
<table id="empData">
<thead>
<tr>
<th>Location</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody id="UserLocation">
<tr>
<td>
<select asp-for="@Model.Location" asp-
items="Html.GetEnumSelectList<Location>()" class="stockCode form-control"
name="locations">
</select>
</td>
<td>
<select asp-for="@Model.roles" asp-items="ViewBag.Rolelist"
class="form-control" name="role">
</select>
</td>
<td><Button onClick='deleteRow(this)' class="kx-repeatable" /></td>
</tr>
</tbody>
</table>
<button onClick="addNewRow()" id="AddNew">Add New Row</button>
js:
$(document).ready(function () {
addNewRow = function () {
var newRow = $("#empData tbody tr").first().clone()
$("#UserLocation").append(newRow);
disableAlreadySelected();
}
deleteRow = function (element) {
$(element).parent().parent().remove();
}
var masterList = [];
var selectedList = [];
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} !=
{ x: 20 }
return false;
}
}
return true;
}
function createMasterList() {
masterList = [];
$('#select1\(1\)').children('#select1 option').each(function () {
masterList.push($(this).val());
});
masterList.shift(); //remove blank value
}
createMasterList(); //used to check if all dropdown values have been selected
function updateSelectedList() {
selectedList = [];
var selectedValue;
$('#empData .stockCode').each(function (index,element) {
selectedValue = $(element).find('option:selected').val();
if (selectedValue != "" && $.inArray(selectedValue, selectedList) == "-1") {
selectedList.push(selectedValue);
}
});
}
//disable the dropdown items that have already been selected
function disableAlreadySelected() {
$('.stockCode > option').each(function (index,element) {
if ($.inArray(element.value, selectedList) != "-1") {
$(element).attr("disabled", "disabled");
} else {
$(element).removeAttr("disabled");
}
});
}
//If all values have been selected, don't let the user add more rows
function hideAddButtonIfDone() {
masterList.sort();
selectedList.sort();
if (masterList.equals(selectedList)) {
console.log("lists equal, hiding add button");
$('#empData #AddNew').hide();
}
else {
console.log("lists not equal, showing add button");
$('#empData #AddNew').show();
}
}
$('#empData').on('change', '.stockCode', function () {
setTimeout(function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
}, 0.1);
});
//when a new table row is added, disable the dropdown options that have already been selected
//$('#empData #AddNew').on('click', disableAlreadySelected);
//when a table row is removed, update all dropdowns (the removed row's dropdown option
//will be re - enabled
//in remaining dropdowns
$('#empData').on('DOMNodeRemoved', '.kx-repeatable > tr', function () {
updateSelectedList();
disableAlreadySelected();
hideAddButtonIfDone();
});
});
结果：