Javascript Laravel 5如何通过下拉选择显示、隐藏div

问题是如何使用下拉onclick函数显示和隐藏div

Blockquote问题2是如何根据该样式的编号获取getElementById（“”）

这是我的CSS，我不想显示我所有的div

<style>
#\1a{ display:none; }      // to 32...//
</style>

@foreach($collections as $collection)
<div id="{{ $collection->id }}">
    <div class="panel panel-default">
        <table border="1" style="width:100%">
            <tbody>
                <tr>
                    <td><h4>Асуулт {{ $i++ }}.</h4><strong>{!! nl2br($question->question_text) !!}</strong></td>
                </tr>
                <tr>
                    <td><input type="hidden" class="form-control" name="questions[{{ $question->id }}]" value="{{ $question->id }}"></td>
                </tr>
                    @foreach($question->options as $option)
                <tr>
                    <td><label class="radio-inline"><input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">{{ $option->option }}</label>
                </td>
                </tr>
                    @endforeach
               </tbody>
        </table>
    </div>
</div>

#\1a{display:none；}//到32//

这是我的JS

<script>
  function show(showid){
    document.getElementById("1").style.display="none";
    document.getElementById("2").style.display="none";
    document.getElementById("3").style.display="none";
  }
</script>

功能显示（showid）{
document.getElementById（“1”）.style.display=“无”；
document.getElementById（“2”）.style.display=“无”；
document.getElementById（“3”）.style.display=“无”；
}

这是我的下拉列表

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" >
      Bla bla bla
  </button>
<ul id="test" name="form_select" class="dropdown-menu">
@foreach ($topics as $topic)
    <li><a href="#" onclick="show('')" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
@endforeach
</ul>
</div>

呜呜呜呜

@foreach（$topics作为$topic）

@endforeach

这是我的部门

<style>
#\1a{ display:none; }      // to 32...//
</style>

@foreach($collections as $collection)
<div id="{{ $collection->id }}">
    <div class="panel panel-default">
        <table border="1" style="width:100%">
            <tbody>
                <tr>
                    <td><h4>Асуулт {{ $i++ }}.</h4><strong>{!! nl2br($question->question_text) !!}</strong></td>
                </tr>
                <tr>
                    <td><input type="hidden" class="form-control" name="questions[{{ $question->id }}]" value="{{ $question->id }}"></td>
                </tr>
                    @foreach($question->options as $option)
                <tr>
                    <td><label class="radio-inline"><input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">{{ $option->option }}</label>
                </td>
                </tr>
                    @endforeach
               </tbody>
        </table>
    </div>
</div>

@foreach（$collections as$collection）
АСцц{{$i++}.{！！nl2br（$question->question_text）！！}
@foreach（$question->options as$option）
{{$option->option}
@endforeach

下拉列表：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Bla bla bla
    </button>
    <ul id="test" name="form_select" class="dropdown-menu">
        @foreach ($topics as $topic)
            <li><a href="#" onclick="show({{ $loop->index }})" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
        @endforeach
    </ul>
</div>

@foreach($collections as $collection)
    <div id="{{ $collection->id }}" class="topic hidden">
        <div class="panel panel-default">
            ...
        </div>
    </div>
@endforeach

function show(id) {
    $('.topic').addClass('hidden');
    $('#' + id).removeClass('hidden');
}

我添加了类

主题

，以识别所有

div

（使用您想要的任何内容），并在类中隐藏所有div。无需定制

CSS

JavaScript:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Bla bla bla
    </button>
    <ul id="test" name="form_select" class="dropdown-menu">
        @foreach ($topics as $topic)
            <li><a href="#" onclick="show({{ $loop->index }})" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
        @endforeach
    </ul>
</div>

@foreach($collections as $collection)
    <div id="{{ $collection->id }}" class="topic hidden">
        <div class="panel panel-default">
            ...
        </div>
    </div>
@endforeach

function show(id) {
    $('.topic').addClass('hidden');
    $('#' + id).removeClass('hidden');
}

第一行将类

hidden

添加到所有

div

以隐藏它们。第二个删除了特定

div的
隐藏的
类

我使用了
jQuery
，因为您将该库用于
引导

这一切都假定
$loop->index
和
$collection->id
具有相同的值。如果没有，您可以尝试将
$collection->id
替换为
$loop->index

@foreach（$collections as$collection）
中
$id
的值是什么？JavaScript代码的思想是显示一个特定的
div
，并隐藏其余部分
$topic->id
的值与
$id
的值相同？哦，很抱歉，我忘了编辑。这是
$collection->id
您在使用引导程序吗？请回答我的其他问题，以便我能够完全理解您的需要。是的，我使用的是bootstrap
version 3.7.7
Yes，我的javascript只是隐藏所有div以显示所选div。否，这不一样。我编辑了我的问题，请检查。我改为$collection->id，就像1到32。与div的increment相同。它的$topic和$collection具有相同的数据？您可以发布控制器吗