填充选择基于另一个选择

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>