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.

For the client side, `$('select-class').change(function() { $(this).next('.show-if-b').show(); });` and for the server side, you can always check the value of the model property (but your select does not even have a `name` attribute and wont bond to anything so its not really clear what your doing) — , Jun 28 '17 at 13:44
@StephenMuecke sorry, I'm using ASP.NET Core and I didn't include my `asp-for` tag on my select which generates a `name`. I edited my example to include it. I want to write client side JavaScript logic that checks the value of the select and displays the `show-if-b` div whenever the select is b. I need this logic to run whenever the select is changed and when the page loads. My issue is getting this to work with BeginCollectionItem. — Ryan Buening, Jun 28 '17 at 13:57
@StephenMuecke I think I could use .closest() onchange of the select, but I don't think that will work on page load because I'm not sure how to specify each individual collection to run the logic against. — Ryan Buening, Jun 28 '17 at 14:33

score 1 · Accepted Answer · answered Jun 28 '17 at 14:52

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>

Arun · Answer 2 · 2017-06-28T14:02:01.450

0

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

edited Jun 28 '17 at 14:02

answered Jun 28 '17 at 13:45

Arun

378
1
11

Thanks for the reply however I don't think your example will work for BeginCollectionItem which creates multiple "repeats" of each id and div. I also don't want to select "b" on page load. I only need to display the `show-if-b` div if "b" is selected in its respective collection. – Ryan Buening Jun 28 '17 at 14:11

score 0 · Answer 3 · answered Jun 28 '17 at 15:40

0

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

answered Jun 28 '17 at 15:40

Ryan Buening

1,559
2
22
60

Why didnt you use jquery on change? – hasan Jun 28 '17 at 16:09
@user8175473 I do use on change. My example above is more of an alternative to using a Model value for showing/hiding on load. – Ryan Buening Jun 28 '17 at 16:38
I see, yes you are right .each is alternative way to make your each div hidden or visible according to condition. – hasan Jun 28 '17 at 16:50

Show/Hide Logic with BeginCollectionItem

3 Answers3