PHP他の選択値からオプションを選択

Question

最初の選択で「マン」を選択した場合、2番目の選択オプションでデータベースからのマン製品を表示します。 最初の選択で「女性」を選択すると、次に2番目の選択オプションがデータベースの女性の製品を表示します。 このシステムを設定するにはどうすればよいですか？

<form method="post" action="" >    

     <label>Category</label></br> 
      <select name="cat"> 
       <option value="Man">Man</option> 
       <option value="Woman">Woman</option> 
      </select></br></br> 


     <label>Product</label></br> 
      <select name="product"> 
       <option value="">Select Product</option> 
      </select></br></br> 
     <input type="submit" name="submit" value="Submit"/> 
</form> 

Answer 1

$(document).ready(function(){ 
 
    $("select.cat").change(function(){ 
 
     var selectCat = $(".cat option:selected").val(); 
 

 
//sample data - code starts here 
 
     var data = '[{"id":1,"name":"product 1"},{"id":2,"name":"product 2"}, {"id":3,"name":"product 3"}]'; 
 
     data = jQuery.parseJSON(data); 
 
//sample data ends here 
 
$('#response').html(''); 
 
     $('#response').append(' <label>Product:</label><select class="product" id="product"> </select> '); 
 

 
     $('#response select').append($("<option />").val('').text('Select')); 
 

 
     $.each(data,function(index, value){ 
 

 
      $('#response select').append($("<option />").val(value.id).text(value.name)); 
 
     }); 
 
//add above code to your ajax success - code ends here.. 
 
     //return false; 
 
     $.ajax({ 
 
      type: "GET", 
 
      url: "process-ajax.php", 
 
      data: { cat : selectCat } 
 
     }).done(function(data) { 
 
     }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<form> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label>Category:</label> 
 
       <select class="cat"> 
 
        <option>Select</option> 
 
        <option value="1">Man</option> 
 
        <option value="2">Woman</option> 
 
       </select> 
 
      </td> 
 
      <td id="response"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form>