[英]Remove a dropdown value that has been selected, from next dropdown menus
我有7個下拉選擇菜單,用於接收人員優先級。 當用戶選擇一個值時,我希望將其從下一個剩余菜單中刪除。
但是jQuery代碼僅適用於2個菜單。 (我從以下位置獲得了代碼: 刪除從另一個下拉菜單中選擇的下拉值 )
<select class="form-control SelectPriority" autocomplete="off" id="FirstPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="SecondPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="ThirdPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="ForthPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="FifthPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="SixthPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control SelectPriority" autocomplete="off" id="SeventhPriority">
<option value="0" disabled selected value>Please choose one.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
和jQuery代碼:
$(document).ready(function () {
$(".SelectPriority").change(function () {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).prop("id");
// Reset so all values are showing:
$(".SelectPriority option").each(function () {
$(this).prop("disabled", false);
});
$(".SelectPriority").each(function () {
if ($(this).prop("id") != thisID) {
$("option[value='" + selected + "']", $(this)).prop("disabled", true);
}
});
});
});
你可以做這樣的事情
$(document).ready(function() {
$('.SelectPriority').change(function () {
// Reset, enable all
$('.SelectPriority option[value!=0]').prop('disabled', false);
// Foeach list
$('.SelectPriority').each(function() {
// Disable the selected value in other lists
$(this).siblings().find('[value=' + $(this).val() + ']').prop('disabled', true);
});
});
});
檢查此代碼
$(document).ready(function() {
$('.SelectPriority').change(function () {
$('.SelectPriority').each(function() {
$(this).siblings().find('[value=' + $(this).val() + ']').prop('disabled', true);
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.