填充選擇基於另一個選擇

Question

我想填充選擇框中的第一個選擇框的選擇，但我有一些麻煩這樣做。根本沒有任何反應

我有什麼到現在爲止（這是我的頁腳）：

<script src="./plugins/bower_components/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("select.category").change(function(){ 
    var selectedCategory = $(".category option:selected").val(); 
    $.ajax({ 
     type: "POST", 
     url: "../inc/get_subcat.php", 
     data: { category : selectedCategory } 
    }).done(function(data){ 
     $("#subcategory").html(data); 
    }); 
}); 
}); 
</script> 

與DIV的頁面位於/pages/file.php：

 <div class="col-md-6"> 
    <div class="form-group"> 
    <label class="control-label">SubCategory</label> 
    <div id="subcategory"> </div> 
</div>          </div> 

，做文件該查詢位於另一個文件夾（inc/get_subcat.php）中：

<?php 
include("config.php"); 

if(isset($_POST['category'])){ 
$cat = validar($_POST['category']); 

$query = "SELECT id, subcategory FROM subcategories WHERE catid = ?"; 
#Prepare stmt or reports errors 
($stmt = $mysqli->prepare($query)) or trigger_error($mysqli->error, E_USER_ERROR); 
#Execute stmt or reports errors 
$stmt->bind_param("i", $cat); 
$stmt->execute() or trigger_error($stmt->error, E_USER_ERROR); 
#Save data or reports errors 
($stmt_result = $stmt->get_result()) or trigger_error($stmt->error, E_USER_ERROR); 
#Check if are rows in query 
if ($stmt_result->num_rows>0) { 
    echo "<select class='form-control' id='subcategory' name='subcategory'>"; 
    # Save in $row_data[] all columns of query 
    while($row_data = $stmt_result->fetch_assoc()) { 
    # Action to do 
     echo "<option value='$row_data[id]'>$row_data[category]</option>"; 
    } 
    echo "</select>"; 
} 
$stmt->close(); 
} 
?> 

有人可以幫我解決這個錯誤嗎？儘管嘗試了幾個小時，仍無法修復。

謝謝！

編輯： 這是HTML代碼的所有選擇框：

          <div class="row"> 
              <div class="col-md-6"> 
               <div class="form-group"> 
                <label class="control-label">Category</label> 
                <select class='form-control' id='category' name='category'><option value='1'>Categoria 1</option><option value='2'>Categoria 2</option></select>             </div>           

             </div> 
              <div class="col-md-6" id="subcategory"> 

              </div> 
             </div> 

Answer 1

在HTML你有<select class='form-control' ...等

所以<select>只有一個「表格控制」類。

但是您的選擇器是$("select.category").change ...等。這意味着它正在尋找類屬性中具有「類別」的選擇（選擇器中的點.表示一個類）。這樣的元素不存在，因此爲什麼沒有發生。

也許你打算使用ID（在這種情況下$("#category").change ...等）？無論是或者你需要寫<select class='form-control category' ...等工作之前。

Answer 2

可能是問題，你的陣列中的數據或查詢。所以請先檢查一下。 我在這裏發佈依賴下拉的工作示例可能是這會幫助你。

PHP代碼

$sub_category // Your array of Subcategory; 
if ($sub_category) { 
      echo '<option value="">Sub Category</option>'; 
      foreach ($sub_category as $sub_category) { 
       $selected = ''; 
       if($sub_category['sub_category_id'] == $data['product']['sub_category_id']) 
       { 
        $selected = 'selected'; 
       } 
       echo '<option value="' . $sub_category['sub_category_id'] . '" '.$selected.'>' . $sub_category['sub_category'] . '</option>'; 
      } 

     } 

JS代碼

<script type="text/javascript"> 

    loadSubCategory(); 

    jQuery(document).ready(function($) { 

     $(document).on('change', '.category_id', function(event) { 
      event.preventDefault(); 

      loadSubCategory(); 
     }); 

    }); 

    function loadSubCategory() 
    { 
      var category_id = $(".category_id option:selected").val(); 

      $.ajax({ 
       url: 'Your Path Of server Function', 
       type: 'post', 
       data: {category_id: category_id, product_id : "<?= $product['product_id']?>" }, 
       cache: false, 
       success: function (resp) { 
        if(resp) 
        { 
         $('.sub_category_id').html(resp); 
        } else { 
         $('.sub_category_id').html('<option value="">Sub Category</option>'); 
        } 

       } 
      }) 
    } 
</script> 

HTML代碼

<div class="form-group"> 
         <b>Product Category </b> 
         <select class="form-control category_id" id="category_id" name="category_id"> 
          <option>Category</option> 
         <?php 

          <option value="<?= $value['category_id'] ?>" <?=$selected ?> ><?= $value['category'] ?></option> 

         </select> 
        </div> 
        <!-- Category End --> 
        <!-- Sub Category Start --> 
        <div class="form-group"> 
         <b>Product Sub Category </b> 
         <select class="form-control sub_category_id" name="sub_category_id"> 
          <option value="">Sub Category</option> 
       <option value="">Sub Category</option> 
       <option value="20">Books Stationery</option> 
            <option value="21">Gaming and Accessories</option> 
            <option value="22">Music Musical Instruments</option> 

         </select> 
        </div>