선택 할 수없는 값 (jquery)을 업데이트하십시오.

Question

저는 선택 가능한 jquery를 사용하고 있습니다. 항목을 선택하거나 선택 해제 한 후에는 선택 가능한 값을 제공하고 싶습니다. 내 문제는 선택 취소 할 수없는 마지막 값이 업데이트되지 않는다는 것입니다. 전체 코드는 여기 http://jsfiddle.net/duQH6/ 월요일과 화를 선택한 다음 값을 선택 취소하면 값이 업데이트되지만 월요일을 누르면 값이 업데이트되지 않습니다. 제발 조언. 여기

내 jQuery 코드

$(function() { 
$("#selectday1").bind('mousedown', function (e) { 
     e.metaKey = true; 
}).selectable(); 
}); 

$('document').ready(function(){ 
$("#selectday1").selectable({ 
    selected: function(event, ui) { 
     var result=[]; 
     jQuery(".ui-selected", this).each(function() 
     { 
     result.push(this.id); 
     $("#days").val(result.join(',')) 
     }); 
    } 
}); 
$("#selectday1").selectable({ 
    unselected: function(event, ui) { 
     var result=[]; 
     jQuery(".ui-selected", this).each(function() 
     { 
     result.push(this.id); 
     $("#days").val(result.join(',')) 
     }); 
    } 
}); 
}); 

감사합니다 ..

Answer 1

문제는, 당신은 당신이 마지막 요소의 선택을 취소 할 때 그래서 루프 콜백이 실행되지 않습니다는 each 루프 내에서 days 값을 업데이트한다 , 그것은 그것이 일어나고있는 이유입니다.

each() 루프가 완료되면 days 값이 업데이트됩니다.

$(document).ready(function() { 
    $("#selectday1").selectable({ 
     selected: function (event, ui) { 
      var result = []; 
      jQuery(".ui-selected", this).each(function() { 
       result.push(this.id); 
      }); 
      $("#days").val(result.join(',')) 
     }, 
     unselected: function (event, ui) { 
      var result = []; 
      jQuery(".ui-selected", this).each(function() { 
       result.push(this.id); 
      }); 
      $("#days").val(result.join(',')) 
     } 
    }); 
}); 

데모 : Fiddle

그러나이 단순화 될 수있다

jQuery(function ($) { 
    function serialize(event, ui) { 
     var result = $(this).find(".ui-selected").map(function() { 
      return this.id; 
     }).get(); 
     $("#days").val(result.join(',')) 
    } 

    $("#selectday1").selectable({ 
     selected: serialize, 
     unselected: serialize 
    }); 
}); 

에 데모 : Fiddle