动态选择框复制结果

Question

我正在尝试根据所选的选项构建多个选择框，然后根据选择的选项进行动态填充。

它似乎正在工作，但第三个选择框有重复的结果，我不明白为什么

这是JS

$(document).ready(function() {

$('.selectchange').one('change', function() {

    var x = $(this).children(":selected").attr("value");
    console.log(x)

    $.ajax({
        type: "POST",
        data: "id=" + x,
        url: "../complaints/index.php/complaint/get_complaint_sub_types",
        dataType: "json",
        success: function(data) {

            var x = $(this).children(":selected").attr("id");

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

                var opt = $('<option />');
                opt.val(value.id);
                opt.text(value.name);
                $('.selectchange1').append(opt);


                $('.selectchange2').one('click', function(event) {

                    var y = $(this).children(":selected").attr("value");


                    $.ajax({
                        type: "POST",
                        data: "id=" + y,
                        url: "../complaints/index.php/complaint/get_complaint_description",
                        dataType: "json",
                        success: function(data1) {

                            if (data1 != " ") {
                                var z = $(this).children(":selected").attr("id");
                                console.log(z);
                                $.each(data1, function(id, value) {

                                    var opt = $('<option />');
                                    opt.val(value.id);
                                    opt.text(value.name);
                                    $('.selectchange2').append(opt);

                                })
                            };

                        }
                    })
                });

            });
        }

    });

});

})

这里是jsfiddle http://jsfiddle.net/7mg3ume5/2/