选择的插件未更新基于 Ajax 结果的选择框

如何解决选择的插件未更新基于 Ajax 结果的选择框

我正在处理两个选择框。一个选择框包含“产品类别”，第二个选择框包含产品。如下图所示。

我可以使用产品或使用类别搜索这两个框。一开始，如果只使用产品进行搜索，它会显示所有产品，这很好。但问题在于类别。

当我选择任何类别时，它应该清除所有产品并仅显示与类别相关的产品。但它没有更新结果。

这是我的 Js

$("#pcategories").chosen().change(function(){
var val = $(this).val();
var info = 'id=' + val;
$.ajax({  
    type: "GET",url: "getproduct.PHP",data: info,success: function(response){                    
             var len = response.length;

            $("#selectedproducts").empty();
            for( var i = 0; i<len; i++){
                var product_id = response[i]['product_id'];
                var product_name = response[i]['product_name'];
                
                $("#selectedproducts").append("<option value='"+product_id+"'>"+product_name+"</option>");
            }
            
    }

  });
});

这是我的 HTML

<select name="productcategories" style="width:600px; "class="chzn-select" id="pcategories" required>
<option>Select Category</option>
<?PHP
    $result = $db->prepare("SELECT * FROM categories");
    $result->bindParam(':userid',$res);
    $result->execute();
    for($i=0; $row = $result->fetch(); $i++){
?>
    <option value="<?PHP echo $row['category_name'];?>"><?PHP echo $row['category_name']; ?></option>
<?PHP
            }
        ?>

这里是产品的 HTML

 <select name="product" style="width:600px; "class="chzn-select" id="selectedproducts" required>
<option></option>
<?PHP

     $result = $db->prepare("SELECT * FROM products");
     $result->bindParam(':userid',$res);
     $result->execute();
     for($i=0; $row = $result->fetch(); $i++){
   ?>
    <option value="<?PHP echo $row['product_id'];?>"><?PHP echo $row['product_code']; ?> - <?PHP echo $row['product_name']; ?> | Price: <?PHP echo $row['price']; ?></option>
<?PHP
            }
        ?>

错误在哪里？如何根据类别更新产品？