也许有人可以帮助我解决我的问题？我需要做的是显示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>
将非常感谢！谢谢！
答案 0 :(得分：0)
您可以使用JavaScript解决此问题。您需要编写一个附加到用户选择内容的函数，例如onSelect，并且当用户选择一个选项时，根据它是哪个选项（您将不得不编写一些逻辑），它可以显示隐藏在div中的功能。
因此，将答案1和2的表单元素隐藏在两个单独的div中。您可以将这些div设置为具有以下质量：
display:none
这将隐藏它们。一旦他们选择了表单元素1（或2），请显示与其相关的div。您可以使用以下代码在JavaScript中完成此操作：
document.getElementById("formQuestionTwo").style.display = "block";
PHP是服务器端的，因此您无法更改客户端端的内容。
答案 1 :(得分：0)
select选项的值不应为路由，而应为模块ID。您无需在模块上创建多个div，而可以在单个div中为元素指定特定ID，然后使用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;
}