根据所选选项显示相关div

作者: Moso31
发布时间: 2024-12-26 11:31:23 (7小时前)
转自：

3 条回复

0#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 选择选项的值不应该是路径，而是模块ID。您可以使用单个div特定ID来提供元素，并使用JQuery来定位特定元素并更改其内容，而不是基于模块创建许多div。 </p> <pre> <code> <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; } </code> </pre> </DIV>

编辑
1#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用JavaScript来解决此问题。您需要编写一个附加到用户选择内容的函数，例如onSelect，当用户选择一个选项时，根据它的选项（你必须编写一些逻辑），它可以显示你隐藏div中的功能。 </p> <P> 因此，在两个单独的div中隐藏答案1和2的表单元素。您可以将这些div设置为具有以下质量： </p> <P> <code> display:none </code> </p> <P> 这将隐藏他们。一旦他们选择了表单元素1（或2），就会显示与之相关的相关div。你可以在JavaScript中使用： </p> <P> <code> document.getElementById("formQuestionTwo").style.display = "block"; </code> </p> <P> PHP是服务器端，因此您无法更改客户端上的内容。 </p> </DIV>

编辑

登录后才能参与评论