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'); 
});

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

2 个答案: