JQueryプラグインの再帰メソッド

Question

一連のhtml select入力用の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(); 

これは私がそう遠

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