他に基づいて選択してください選択

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> 

ないファイルこのエラーを修正しようとしている私を助けることができる誰かがある

<?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(); 
} 
?> 

：クエリは、別のフォルダ（INC/get_subcat.php）にありますか？数時間試しても修正できません。

ありがとうございます！

編集： これは、すべての選択ボックスで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>は、クラス「フォーム制御」のみを有する。

セレクタが$("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> 

あなたは<select class='form-control'を持っているあなたの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>