MySQL表填充一個dropown。一旦選擇，第二個下拉列表填入

Question

好的，所以我檢查了網絡和其他問題在這裏，我很難過。我試過了一個來自這裏發佈的問題的JavaScript解決方案，但我認爲它不喜歡MySQL填充<option> s。我將複製我所擁有的所有代碼，包括我擁有的JavaScript。

SCRIPT：

<script> 
    $(function() { 
    $('#groups').on('change', function() { 
     var val = $(this).val(); 
     var sub = $('#sub_groups'); 
     $('option', sub).filter(function() { 
     if (
      $(this).attr('data-group') === val || $(this).attr('data-group') === 'SHOW' 
     ) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
     }); 
    }); 
    $('#groups').trigger('change'); 
    }); 
</script> 

PHP 1下拉：

<select class="form-control" id="groups"> 
    <?php 
     $sql = "SELECT BoilerBrand FROM boilerbrands"; 
     $result = mysql_query($sql); 
     while ($row = mysql_fetch_array($result)) { 
      echo "<option value='".$row['ID']."'>".$row['BoilerBrand']."</option>"; 
     } 
     ?> 
</select> 

PHP第二下拉

<select class="form-control" id="sub_groups"> 
    <option data-group='SHOW' value="0">Model</option> 
    <?php 
    $sql = "SELECT * FROM boilermodels"; 
    $result = mysql_query($sql); 
    while ($row = mysql_fetch_array($result)) { 
     echo "<option data-group='".$row['BoilerBrand']."' value='".$row['BoilerGC']."'>".$row['BoilerModel']."</option>"; 
    } 
    ?> 
</select> 

任何幫助，將不勝感激！

謝謝:)

Answer 1

的方式，我通常做到這一點，而不是隱藏/顯示我刪除/選項添加。我相信，如果您隱藏option s，那麼select輸入仍然可以具有該值。

SCRIPT：

<script> 
    $(function(){ 
     <?php 
     $sql = "SELECT * FROM boilermodels"; 
     $result = mysql_query($sql); 
     $models = array(); 
     while ($row = mysql_fetch_array($result)) { 
      $models[$row['BoilerBrand']][] = $row; 
     } 
     /* should look like 
     $models = []; 
     $models[1][] = ['ModelID'=>'1','BoilerBrand'=>'1','BoilerModel'=>'240E','BoilerGC'=>'47-777-77','BoilerImage'=>'47-777-77.jpg' ]; 
     $models[1][] = ['ModelID'=>'3','BoilerBrand'=>'1','BoilerModel'=>'290D','BoilerGC'=>'11-111-11','BoilerImage'=>'11-111-11.jpg' ]; 
     $models[2][]= ['ModelID'=>'2','BoilerBrand'=>'2','BoilerModel'=>'250E','BoilerGC'=>'47-777-77','BoilerImage'=>'47-777-77.jpg' ]; 
     */ 
     ?> 
     var _boilermodels = '<?php echo json_encode($models); ?>'; 
     var jsonBoilerModels = JSON.parse(_boilermodels); 
     console.log(jsonBoilerModels); 

     $('#groups').on('change', function(){ 
      var $this = $(this); 
      var val = $this.val(); 
      var sub = $('#sub_groups'); 
      sub.find('option').remove(); 
      var appendList = []; 

      $.each(jsonBoilerModels[val],function(key,value){ 
       appendList.push('<option value="'.concat(value['BoilerGC'], '">', value['BoilerModel'], '</option>')); 
      }); 

      sub.append(appendList); 
     }); 

     $('#groups').trigger('change'); 
    }); 
</script> 

1下拉：

<select class="form-control" id="groups"> 
    <?php 
     $sql = "SELECT ID ,BoilerBrand FROM boilerbrands"; 
     $result = mysql_query($sql); 
     while ($row = mysql_fetch_array($result)) { 
      echo "<option value='".$row['ID']."'>".$row['BoilerBrand']."</option>"; 
     } 
    ?> 
</select> 

第二個下拉：

<select class="form-control" id="sub_groups"> 
    <option value="">Select A Model</option> 
</select>