创建简单的依赖jQuery选择框不起作用

Question

试图使一个依赖选择框。 我有两个模型，区域和建筑物，一个区域有许多建筑物，因此在这种情况下，父选择框将为（Areas），子选择框为（Buildings）。

在我的php页面上，我查询父选择框中的所有区域行，并查询子选择框中的所有建筑物。

首先：父选择框（区域）：-

<select id="buildgs"  onchange="showBuildings()">
    @foreach ($areas as $a)
      <option value="{{$a->name}}">{{$a->name}}</option>
    @endforeach
</select>

上面的代码结果：

<select id="buildgs" " onchange="showBuildings()">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

第二：孩子选择（建筑物）：-

<select id="building" >
   <option value=""></option>
   @foreach ($areas as $a)
      @foreach($a->buildings as $b)
          <option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
          @if($b->symbol)
               {{$b->symbol}} ({{$b->name}})
          @else
               {{$b->name}}
          @endif
          </option>
       @endforeach
    @endforeach
 </select>

上面的代码结果：

<select id="building">
     <option style="display: none" id="A" value="58">
                            STFA Land Area Workshop
     </option>
     <option style="display: none" id="A" value="121">
                            Temporary offices
     </option>
     <option style="display: none" id="B" value="60">
                            TC (Training Center)
     </option>
     <option style="display: none" id="B" value="110">
                            STFA Onshore Cabins
     </option>
     <option style="display: none" id="B" value="111">
                            STFA Onshore WS
     </option>
 </select>

jQuery和Javascript代码：-

    <script>
      function showBuildings(){
         //getting the value from Parent (Areas)
            var x = $("#buildgs").val();
         //This one just for testing and it's working
            document.getElementById('testt').innerHTML='this changed to '+ x;

//This supposed to change all child <option>.style with x id but it not doing any thing !!!!!
            document.getElementById(x).style.display='display';
                        }
     </script>

Answer 1

首先， id属性必须是唯一的，将其替换为class 。

更改此行：

<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">

至：

<option style="display: none" class="{{$a->name}}" value="{{$b->id}}">

并更改此行：

document.getElementById(x).style.display='display';

至：

var results = document.getElementsByClassName(x);
for(var i = 0; i < results.length; i++) {
   results[i].style.display='display';
}

UPDATE

我看到您使用jQuery来检索选择框的值，这是一种干净的方法，只需较少的代码即可实现所需的功能：

<select id="buildgs"  onchange="showBuildings(this.value)">

您的新功能：

  <script>
      function showBuildings(val){
            $('#building option').not('.'+val).hide(); // Don't forget this!
            $('#building option.' + val).show();
      }
  </script>