JQuery插件中的递归方法

我正在尝试为一系列html选择输入开发一个JQuery插件。 如果任何选择更改，所有后续选择都将更改/重新加载

这是html-

<select id="first"  class="myselect" data-child ="second">...</select>
<select id="second" class="myselect" data-child ="third">..</select>
<select id="third" class="myselect"  data-child ="fourth">...</select>
....

$('.myselect').MySelect();

---

如何在插件中实现这一点？

一种方法是使用自定义事件，当被触发时，它会执行您想要的任何重置操作，然后触发自身的更改，从而使其级联到链中

（函数（$）{
$.fn.MySelect=函数（）{
返回此值。每个（函数（）{
var$This=$（This）；
var childId=$This.attr（'data-child'），
$child=childId！=“无”？$（“#”+childId）：null；
$This.on（'change'，函数（e）{
e、 预防默认值（）；
$child&&$child.trigger（'my-reset'）
}).on（'my-reset'，功能（e）{
$This.val（“”）.trigger（'change'）；
});
});
};
})（jQuery）；
$（函数（）{
$（'.myselect'）.myselect（）；
})

一个
两个
一个
两个
一个
两个
一个
两个

或

$Child.MySelect（）？
(function ($) {
  $.fn.MySelect= function () {       
    return this.each(function () {
        var $This = $(this);
        var childId = $This.attr('data-child');           

        $This.change(function (e) {
            e.preventDefault();
            if (childId !='none') {                    
                var $Child = $('#' + childId); 
               $Child.Reset(); //Should be Recursive call
            }              
        });                   
    });
};

}(jQuery));