不要从第一个下拉列表中已选择的项目中选择第二个下拉列表

Question

我有两个包含相同问题的下拉列表。 我必须从第一个下拉列表中“不显示”所选项目，反之亦然。如果我从第 1 个下拉菜单中选择了第 1 个问题，那么它在第 2 个下拉列表中将不可用。

下面是我的代码：

<div class="form-group">
    @Html.DropDownListFor(m => m.ChallengeQuestion1, (SelectList)ViewBag.ChallengeQuestions, "-- Challenge Question 1 --", new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.ChallengeQuestion1)
</div>

<div class="form-group">
    @Html.TextBoxFor(m => m.ChallengeAnswer1, new { @class = "form-control", placeholder = "Answer" })
    @Html.ValidationMessageFor(m => m.ChallengeAnswer1)
</div>

<div class="form-group">
    @Html.DropDownListFor(m => m.ChallengeQuestion2, (SelectList)ViewBag.ChallengeQuestions, "-- Challenge Question 2 --", new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.ChallengeQuestion2)
</div>

<div class="form-group">
    @Html.TextBoxFor(m => m.ChallengeAnswer2, new { @class = "form-control", placeholder = "Answer" })
    @Html.ValidationMessageFor(m => m.ChallengeAnswer2)

Answer 1

选择第一个下拉选项时，您必须删除第二个下拉选项。 您可以通过编写第一个下拉列表的 javascript 更改事件并从第二个下拉列表中删除第一个选择的选项来做到这一点。

$("select[name='ChallengeQuestion1']").change(function() {
    var selectedItem = $(this).val();        
    $("select[name='ChallengeQuestion2'] > option[value=" +selectedItem +"]").remove();  
});

Answer 2

正如斯蒂芬已经告诉你必须在客户端这样做。

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    var selectedItem = $(this).val();        
    $("select[name='dropdown2'] > option[value=" +selectedItem +"]").attr('disabled', true)
    .siblings().removeAttr('disabled'); 
});