Show/Hide Logic with BeginCollectionItem

Question

I'm using BeginCollectionItem and I'm trying to figure out how to get each individual collection value to do conditional show/hide logic. For example, if I have the following razor markup:

<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>

I need to show the "show-if-b" div if the "b" element is selected, else it needs to hide. This logic needs to run onchange of the select and when the page loads ("b" could be saved) so I don't always have an event to attach to.

I've tried different approaches with jQuery .closest(), .find(), and .parents() but I can't seem to get the specific select value in each collection.

Any help is greatly appreciated.

Answer 1

You can use $(this).next() in on("change") to select your each div element which has "b is selected". I set these elements style display none as a default but you can change this css property according to your model initial value. You can implement like following.

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

<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>

Answer 2

Add "collapsed" class to the div and try using the below css and javascript code(This will hide and unhide the div based on selected value): 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");
    }
});

If you want option "b" to be selected on page load use below code as well

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

Answer 3

While @user8175473's answer above will work, I found I can also use jQuery's .each() and .find() functions to loop through each collection:

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