Question

我正在使用BeginCollectionItem，而我正试图弄清楚如何让每个单独的集合值来执行条件显示/隐藏逻辑。例如，如果我有以下剃刀标记：

<div class="collection">
    @using (Html.BeginCollectionItem(nameof(Item)))
    {
        <select class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
        </select>

        <div class="show-if-b">b is selected</div>
    }
</div>

我需要展示＆＃34; show-if-b＆＃34; div如果＆＃34; b＆＃34;选择元素，否则需要隐藏。当页面加载时，此逻辑需要在选择和的更改时运行（＆＃34; b＆＃34;可以保存），因此我不总是要附加事件。< / p>

我尝试过使用jQuery .closest（）,. find（）和.parents（）的不同方法，但我似乎无法在每个集合中获得特定的选择值。

非常感谢任何帮助。

Answer 1

您可以使用$(this).next()中的on("change")来选择包含"b is selected"的每个div元素。我将这些元素样式显示为none作为默认值，但您可以根据模型初始值更改此css属性。你可以实现如下。

＆＃13;

$(".collection .select-class").on("change", function(){
     var val = $(this).val();
     if(val == "a")
     {
         $(this).next().hide();
     }
     else
     {
         $(this).next().show();
     }
     
     
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">
    <table>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
    </table>    
</div>

＆＃13;

Answer 2

添加＆＃34;折叠＆＃34; class到div并尝试使用下面的css和javascript代码（这将隐藏和取消隐藏基于所选值的div）： HTML：

<div class="show-if-b collapsed">b is selected</div>

CSS：

 .collapsed{
      display : none;
    }

使用Javascript：

$(document).on("change","#select-id",function(){
    if($(this).val() == "b"){
        $(".show-if-b").removeClass("collapsed");
    }
    else{
      $(".show-if-b").addClass("collapsed");
    }
});

如果你想要选项＆＃34; b＆＃34;要在页面加载时选择使用以下代码

 $(document).ready(function(){
           $("#select-id").val("b");
           $(".show-if-b").removeClass("collapsed");
        });

Answer 3

虽然@ user8175473上面的答案可行，但我发现我也可以使用jQuery的.each（）和.find（）函数循环遍历每个集合：

$(".collection").each(function (index)
{
    if ($(this).find("#select-id").val() === "b")
    {
        $(this).find(".show-if-b").show();
    }
    else
    {
        $(this).find(".show-if-b").hide();
    }
});

使用BeginCollectionItem显示/隐藏逻辑

3 个答案: