根据所选选项显示相关 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

您可以使用 JavaScript 来解决这个问题。您需要编写一个附加到用户选择的函数，例如onSelect，当用户选择一个选项时，取决于它是哪个选项（您必须编写一些逻辑），它可以显示隐藏 div 中的功能。

因此，将答案 1 和 2 的表单元素隐藏在两个单独的 div 中。您可以将这些 div 设置为具有质量：

display:none

这将隐藏它们。一旦他们选择了表单元素 1（或 2），显示与其相关的相关 div。您可以在 JavaScript 中使用：

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

PHP 是服务器端，因此您无法更改客户端的内容。

Answer 2

选择选项的值不应该是路由，而应该是模块 ID。您可以为单个 div 中的元素指定特定 id 并使用 JQuery 定位特定元素并更改其内容，而不是基于模块创建许多 div。

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