Question

尝试制作从属选择框。我有两个模型，区域和建筑物，一个区域有很多建筑物，所以在这种情况下，父选择框将是（区域），子项是（建筑物）。

在我的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';
}

<强>更新

我看到你使用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>

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

1 个答案: