Показать связанный div на основе выбранной опции

Question

Может быть, кто-то может помочь мне с моей проблемой?Все, что мне нужно, это показать div с контентом (схема div на самом деле всегда одна и та же, но контент (id, имя и т. Д.) Отличается в зависимости от выбора пользователя. Например, пользователь выбирает модуль 1, а ниже показывает модуль 1, выбирает модуль 2и показывает модуль 2. Я предполагаю, что могу сделать это с помощью ajax или jQuery, но все, что я пробовал, не работает должным образом. Моя логика:

   <script>
        function showSmtpType() {
            var selectBox = document.getElementById('type');
            var userInput = selectBox.options[selectBox.selectedIndex].value;
            @foreach($modules as $module)
            if (userInput == "{{ route("module", ['module' => ($module->id)]) }}"){
                document.getElementById('moduleType').style.visibility ='visible';}
            else {
                document.getElementById('moduleType').style.visibility ='hidden';
            }
            return false;
            @endforeach
        }
    </script>
    <main class="main">
                <div class="container-fluid">
                    <div class="animated fadeIn">
                        <div class="row">
                            <div class="col-sm-6 col-lg-8">
                                <h4 class="head">Module-setup</h4>
                                <div class="col-md-9 col-xl-6">
                                    <span class="head-2">Module:</span>
                                    <select class="dropdownHeader function" id="type" name="type" onchange="return showSmtpType();">
                                        @foreach($modules as $module)
                                            <option value="{{ route("module", ['module' => ($module->id)]) }}">{{$module->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
    {{--Begin of description--}}
                                <div class="card-custom  bg-primary-2" >
<div class="card-body pb-0">
                                    @foreach($modules as $k=>$item)
                                    @if($k ==0)
                                    <div class="btn-group float-right">
                                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="icon-settings"></i>
                                        </button>
                                    </div>
                                    <div class="text-value">
                                        @if($item->enabled == 1)
                                        <input checked name="enabled" type="checkbox" value=""><span class="checkbox">
                                            </span>
                                                 @endif
                                                @if ($item->enabled ==0)
                                                <input  name="enabled" type="checkbox" value=""><span class="checkbox"></span>
                                                        @endif
                                         Enabled </span><br/>
                                                    @if($item->active == 1)
                                        <input checked name="active" type="checkbox" value=""><span class="checkbox">
                                                        </span>
                                                            @endif
                                                            @if($item->active == 0)
                                        <input name="active" type="checkbox" value=""><span class="checkbox">
                                                                    @endif
                                                            Active</span>
                                            @endif
                                                @endforeach
                                    </div>
                                    <div id="moduleType" style="visibility: hidden;">
                                        <span style="margin-right: 40px;">Database:</span>
                                        {!! Form::text('database',isset($module->DB)? $module->DB : old('DB'),['placeholder' =>'Database'])!!}
                                        <br/> <br/>
                                        <span style="margin-right: 75px;">Path:</span>
                                        {!! Form::text('path',isset($module->path)? $module->path : old('PATH'),['placeholder' =>'Path'])!!}
                                        <br/><br/>
                                        <span style="margin-right: 5px;">Friendly name:</span>
                                        {!! Form::text('standardname',isset($module->standardname)? $module->standardname : old('DB'),['placeholder' =>'Friendly name'])!!}
                                        <br/><br/>
                                        <span style="margin-right: 20px;">Icon(20x20):</span>
                                        @if(isset($module->icon))
                                            <li style="list-style: none;" class="textarea-field">
                                                <label>
                                                    <span class="label">Image:</span>
                                                </label>
                                                {{ Html::image(asset('/images/img/icons'.$module->icon->path)) }}
                                                {!! Form::hidden('old_image',$module->icon->path) !!}
                                            </li>
  @endif
                                        <li style="list-style: none;" class="text-field">
                                            <div class="input-prepend">
                                                {!! Form::file('image',['class'=>'filestyle', 'data-buttonText'=>'choose image','data-buttonName'=>'image'])!!}
                                            </div>
                                        </li>
                                    </div>
                                </div>
                                <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
                                    <canvas class="chart" id="card-chart1" height="70"></canvas>
                                </div>
                            </div>
{{--End of div with description of module--}}
                        </div>
                    </div>
                </div>
            </div>
        </main>

Буду очень признателен! Спасибо!

Answer 1

Значением опций выбора должен быть не маршрут, а скорее идентификатор модуля.Вместо того чтобы создавать множество элементов div на основе модулей, вы можете присвоить элементам одного идентификатора отдельного элемента div и использовать JQuery для нацеливания на конкретные элементы и изменения его содержимого.

<select class="dropdownHeader function" id="type" name="type">
@foreach($modules as $module)
 <option value="{{ $module->id }}">{{$module->name }}</option>
@endforeach
</select>


<script>
// Using JQuery
$('#type').change(function() {
 const modules = {!! $modules !!};
 const type = this.val(); // a constant that holds the value of the selected type
 const module = modules[type]; // a constant that holds the module of the selected type

 // here target the div elements and change its content or manipulate it
 // For instance you have a <span id="status"></span> in the div. You can do
 $('#status').html(module.enabled); // this would change the span content to that of the selected type.

 // In vanilla javascript you can do
 document.getElementById('status').innerHTML = module.enabled;
}

Answer 2

Вы можете использовать JavaScript для решения этой проблемы.Вам нужно будет написать функцию, прикрепленную к тому, что пользователь выбирает, например, onSelect, и когда пользователь выбирает опцию, в зависимости от того, какая опция у вас есть (вам придется написать некоторую логику), она может раскрыть ваши функциональные возможности, которые находятся вскрытый div.

Итак, скройте элемент формы для ответов 1 и 2 в двух отдельных div.Вы можете установить эти div для качества:

display:none

, которое будет скрывать их.Как только они выбрали элемент формы 1 (или 2), покажите соответствующий div, связанный с ним.Вы можете сделать это в JavaScript, используя:

document.getElementById("formQuestionTwo").style.display = "block";

PHP на стороне сервера, поэтому вы не можете изменить то, что на стороне клиента.