根据JS中html标签的类和id（增量）隐藏和显示div

Question

Currently I have multiple select option using MDB frontend framework

and I'm loading it with different class, id and name

this is the working code

 @if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select class="mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif

And this is my JS code

<script>
$("#accessSelect1").on('change', function() {
    if(this.value == "ALL"){
       $(".access-right1").hide();
    }
    else if (this.value == "NO"){
        $(".access-right1").hide();
    }
    else if(this.value == "CONFIG"){
        $(".access-right1").show();
    }
  });

  </script>

Output :

As you can see, the id for select option > accessSelect1 is hard coded

What I'm trying to do is to show and hide specific add,edit,remove for each line. using the id of select option accessSelect

As of now, Show and Hide of div is working only for accessSelect1

Answer 1

Try this.

Hope this will work

Declare data-id = "{{$field->id}}" on select

Add access-right class on select

@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif

<script>
$(".access-select").on('change', function() {
        var id = $(this).attr('data-id');
        if(this.value == "ALL"){
           $("#access-right-"+id).hide();
        }
        else if (this.value == "NO"){
            $("#access-right-"+id).hide();
        }
        else if(this.value == "CONFIG"){
            $("#access-right-"+id).show();
        }
  });
  </script>

Answer 2

 // [id^=accessSelect] will select all IDs starting with"accessSelect" $("[id^=accessSelect]").on('change', function() { // from the current select get the parent .row element // from there chose the child containing a class "access-right" var $accessRights = $(this).closest('.row').children('[class*=access-right]'); if($(this).val() == "CONFIG") { $accessRights.show(); } else { // if it's not "CONFIG" you want to hide them allways $accessRights.hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-4"> <select class="mdb-select accessSelect1" name="accessSelect1" id="accessSelect1" style="width: 170px!important;"> <option value="" disabled selected>Select Access Right</option> <option value="ALL">All Access</option> <option value="NO">No Access</option> <option value="CONFIG">Config Access</option> </select> </div> <div class="col-md-2 access-right1" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input add1" name="add1" id="add1"> <label class="custom-control-label" for="add1">Add</label> </div> </div> <div class="col-md-2 access-right1" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input edit1" name="edit1" id="edit1"> <label class="custom-control-label" for="edit1">Edit</label> </div> </div> <div class="col-md-2 access-right1" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input remove1" name="remove1" id="remove1"> <label class="custom-control-label" for="remove1">Remove</label> </div> </div> </div> <div class="row"> <div class="col-md-4"> <select class="mdb-select accessSelect2" name="accessSelect2" id="accessSelect2" style="width: 170px!important;"> <option value="" disabled selected>Select Access Right</option> <option value="ALL">All Access</option> <option value="NO">No Access</option> <option value="CONFIG">Config Access</option> </select> </div> <div class="col-md-2 access-right2" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input add1" name="add1" id="add1"> <label class="custom-control-label" for="add1">Add</label> </div> </div> <div class="col-md-2 access-right2" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input edit1" name="edit1" id="edit1"> <label class="custom-control-label" for="edit1">Edit</label> </div> </div> <div class="col-md-2 access-right2" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input remove1" name="remove1" id="remove1"> <label class="custom-control-label" for="remove1">Remove</label> </div> </div> </div> <div class="row"> <div class="col-md-4"> <select class="mdb-select accessSelect3" name="accessSelect3" id="accessSelect3" style="width: 170px!important;"> <option value="" disabled selected>Select Access Right</option> <option value="ALL">All Access</option> <option value="NO">No Access</option> <option value="CONFIG">Config Access</option> </select> </div> <div class="col-md-2 access-right3" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input add1" name="add1" id="add1"> <label class="custom-control-label" for="add1">Add</label> </div> </div> <div class="col-md-2 access-right3" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input edit1" name="edit1" id="edit1"> <label class="custom-control-label" for="edit1">Edit</label> </div> </div> <div class="col-md-2 access-right3" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input remove1" name="remove1" id="remove1"> <label class="custom-control-label" for="remove1">Remove</label> </div> </div> </div> <div class="row"> <div class="col-md-4"> <select class="mdb-select accessSelect4" name="accessSelect4" id="accessSelect4" style="width: 170px!important;"> <option value="" disabled selected>Select Access Right</option> <option value="ALL">All Access</option> <option value="NO">No Access</option> <option value="CONFIG">Config Access</option> </select> </div> <div class="col-md-2 access-right4" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input add1" name="add1" id="add1"> <label class="custom-control-label" for="add1">Add</label> </div> </div> <div class="col-md-2 access-right4" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input edit1" name="edit1" id="edit1"> <label class="custom-control-label" for="edit1">Edit</label> </div> </div> <div class="col-md-2 access-right4" style="display:none;"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input remove1" name="remove1" id="remove1"> <label class="custom-control-label" for="remove1">Remove</label> </div> </div> </div>

Answer 3

First, you need to replace your selector with class. Use the following script and html which will work just fine.

@if(count($manage_access_list))
    @foreach($manage_access_list as $field)
        <div class="row" id="accessSelect{{$field->id}}">
            <div class="col-md-2">
                {{$field->access_desc}}
            </div>
            <div class="col-md-4">
                <select class="mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" style="width: 170px!important;">
                    <option value="" disabled selected>Select Access Right</option>
                    <option value="ALL">All Access</option>
                    <option value="NO">No Access</option>
                    <option value="CONFIG">Config Access</option>
                </select>
            </div>

                <div class="col-md-2 access-check access-right-all" style="display:none;">
                    <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add{{$field->id}}">
                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                    </div>
                </div>
                <div class="col-md-2 access-check access-right-no" style="display:none;">
                    <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit{{$field->id}}">
                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                    </div>
                </div>
                <div class="col-md-2 access-check access-right-config" style="display:none;">
                    <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove{{$field->id}}">
                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                    </div>
                </div>
        </div>
    @endforeach
@endif

The row will have unique id and based on that we will handle child components

$(".mdb-select").on('change', function() {
    var select = $(this).parent().parent().attr('id');
    var value = $(this).val();
    $('#' + select + ' .access-check').hide();
    $('#' + select + ' .access-right-' + value.toLowerCase()).show();
});