基于另一个 Select 填充 Select

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> 只有一个类“form-control”。

但是您的选择器是$("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>