级联下拉逻辑无法正常工作

Question

我已经开始学习网络开发。我的应用程序有两个下拉列表，其中一个值取决于另一个。

我遵循https://codepen.io/bahiirwa/pen/OjNYZb逻辑来实现它。

但是级联逻辑无法正常工作。

输入：

第1步：这两个下拉列表从数据库中获取数据。我已经用ajax实现了。

  <div class="form-group">
                        <div class="row">
                            <div class='col-sm-2'>
                                <label for="sel2">Primary Function</label>
                                <select class="form-control" id="primfunct">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class='col-sm-2'>
                                <label for="sel2">Secondary Function</label>
                                <select class="form-control" id="secfunct">
                                </select>
                            </div>
                        </div>
                    </div>
  <script>
  function primaryfunction() {
                    $.ajax({

                        url: 'WebForm1.aspx/primfuncdata',
                        type: 'Post',

                        data: {},
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',

                        success: function (response) {
                            $('#primfunct').empty();
                            $('#primfunct').append("<option value='0'>--Select--</option>");
                            $.each(response.d, function (key, value) {

                                $('#primfunct').append($("<option></option>").val(value.sno).html(value.primfunct));
                            });

                        },
                        failure: function (response) {

                            alert(response + 'failure');
                        }
                    });

                }


                function Secondaryfunction() {
                    $.ajax({

                        url: 'WebForm1.aspx/secondfunctdata',
                        type: 'Post',

                        data: {},
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',

                        success: function (response) {
                            $('#secfunct').empty();
                            $('#secfunct').append("<option value='0'>--Select--</option>");
                            $.each(response.d, function (key, value) {

                                $('#secfunct').append($("<option></option>").val(value.sno).html(value.secfunct));
                            });

                        },
                        failure: function (response) {

                            alert(response + 'failure');
                        }
                    });

                }
            </script>

上述逻辑可以很好地从sql表中获取数据。

第2步：但是在填充下拉列表之后，我试图通过以下功能实现层叠下拉列表，但是它不起作用。

function getdata()
                {
                    var $select1 = $('#primfunct'),
                        $select2 = $('#secfunct'),
                        $options = $select2.find('option');

                    $select1.on('change', function () {

                        $select2.html($options.filter('[value= "' + 
   this.value + '" ]'));
                    }).trigger('change');

                }
   $(document).ready(function () {   
                    primaryfunction();
                    Secondaryfunction();
                    getdata();
});

我很震惊，请帮助我解决问题。