JQuery插件打破了下拉列表的行为

Question

我在一个成功运行的网页上有一个搜索表单，当选择一个类别时，子类别下拉列表在选择类别后成功填充，使用此代码：

<script>
    $(document).ready(function() {
        $("select[name='channel']").change(function() {
            var channel_id = $(this).val();

            console.log(channel_id);

            $("select[name='sub_category']").html("<option value='All'>Sub Category</option>");

            $.ajax({
                type: "POST",
                url: "/ajax.php",
                data: "channel_id=" + channel_id,
                dataType: 'json',
                statusCode: {
                    200: function(data) {
                        for (i = 0; i < data.length; i++) {
                            $("select[name='sub_category']").append("<option value='" + data[i]["sub_channel_id"] + "'>" + data[i]["sub_channel_name"] + "</option>");
                        }
                    }
                }
            });
        });
    });
</script>

但是，当添加jquery插件时，“搜索表单”会起作用，但选择“类别”后子类别下拉列表不会成功填充， jQuery脚本使用以下代码：

<script>
    $(document).ready(function() {
        $("select.ui-select").selectWidget({
            change: function(changes) {
                return changes;
            },
            effect: "slide",
            keyControl: true,
            speed: 200,
            scrollHeight: 250
        });
    });
</script>

这是我陷入困境的地方。关于如何解决这个问题的任何想法？