Рекурсивный метод в плагине JQuery

Question

Я пытаюсь разработать плагин JQuery для серии входных данных для выбора html. Если какие-либо изменения выбора, все последующие выборки будут изменены/перезагружены.

Вот 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(); 

Это мой плагин я был так далеко

(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)); 

Как я могу сделать это в плагине?

Answer 1

Один из способов будут использовать пользовательское событие, которое при запуске делает то, что сброс вы хотите, и затем вызывают изменения на себе, так что каскад вниз по цепочке

(function($) { 
 
    $.fn.MySelect = function() { 
 

 
    return this.each(function() { 
 
     var $This = $(this); 
 
     var childId = $This.attr('data-child'), 
 
     $child = childId != 'none' ? $('#' + childId) : null; 
 

 
     $This.on('change', function(e) { 
 
     e.preventDefault(); 
 
     $child && $child.trigger('my-reset') 
 
     }).on('my-reset', function(e) { 
 
     $This.val('').trigger('change'); 
 
     }); 
 

 
    }); 
 
    }; 
 

 
})(jQuery); 
 

 
$(function() { 
 
    $('.myselect').MySelect(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="first" class="myselect" data-child="second"> 
 
    <option value=""></option> 
 
    <option value="1">One</option> 
 
    <option value="2"selected>Two</option> 
 
</select> 
 
<select id="second" class="myselect" data-child="third"> 
 
    <option value=""></option> 
 
    <option value="1" selected>One</option> 
 
    <option value="2">Two</option> 
 
</select> 
 
<select id="third" class="myselect" data-child="fourth"> 
 
    <option value=""></option> 
 
    <option value="1">One</option> 
 
    <option value="2" selected>Two</option> 
 
</select> 
 
<select id="fourth" class="myselect" data-child="none"> 
 
    <option value=""></option> 
 
    <option value="1">One</option> 
 
    <option value="2" selected>Two</option> 
 
</select>