根据所选选项显示相关div

Question

也许有人能帮我解决我的问题？我所需要的就是显示带有内容的div (实际上div的模式总是相同的，但是内容(id，name等))根据用户的选择而不同。例如，用户选择模块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

select选项的值不应该是路由，而应该是模块id。与基于模块创建许多div不同，您可以为单个div中的元素提供特定的ids，并使用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;
}