如何根据选择其他选择选项更改选择选项

Question

我有两个选择选项,一个是类别,第二个是子类别,我从MySQL获取了第一个选择选项,现在我想通过使用查询根据所选类别获取子类别.

喜欢 select cat_name form DB1 where id= ID_OF_SELECTED CATEGORY

                    <div class="form-group">
                    <label style="align-content:center" for="inputdefault">Select a category</label>                    
                    <?php
                    $sql = "SELECT * from noorizone.categories where parent=''";
                    $result = $con->query($sql);
                    // output data of each row
                    echo "<select class='form-control' id='sel1' onchange='getSubCategory()'>";
                    while($row = mysqli_fetch_array($result)) 
                    {
                        echo "<option value=".$row["id"].">".$row["name"]."</option>" ;
                    }
                    $maincat= $row["id"];
                    echo "</select>"
                    ?>  
                </div>

这是我获取主类别值的代码.我知道它可能使用AJAX请求,但我不知道ajax.

你能帮我解决一下我的问题吗？

Answer 1

这是一个如何实现这个的算法:

1. 使用Javascript/Jquery,监听"类别"下拉选项值的变化.
2. 获取该值并使用AJAX将其发送到您的控制器 - >模型(如果您使用的是MVC模式).
3. 基于此值执行sql查询并获取该父类别选项所需的"子类别选项"并返回该值.
4. 获取这些返回值并填充"子类别"选项下拉列表.

这是伪代码:

//Category Dropdown
<select name="status" id="status">
  <option value="1">Active</option>
  <option value="0">Inactive</option>
</select>

JS:

$("#status").change(function(){
  var status = this.value;

  $.ajax({
    url: 'call_your_controller_function',
  success: function(response){
    var data = response;    //Response should be array like option1 , option2, option3
    var option = '';
    for (var i=0;i<data.length;i++){
       option += '<option value="'+ data[i] + '">' + data[i] + '</option>';
    }
    //Now populate the second dropdown i.e "Sub Category"
    $('#id_of_sub_category').append(option);
  },
  error: function(){
    alert('failure');
   }
 });

});