基本的に私がやろうとしているのは、selectable() UI の実行が停止したときに、選択した要素に含まれる非表示の入力フィールドの値属性を更新することです。
要素が選択されている場合、入力の値はその特定の LI の name 属性である必要がありますが、要素が選択されていない場合、値は空として更新される必要があります。
HTML サンプル:
<ul id="selector">
<li class="networkicon shr-digg" name="shr-digg">
<div></div>
<label>Digg</label>
<input type="hidden" value="" name="bookmark[]" />
</li>
<li class="networkicon shr-reddit" name="shr-reddit">
<div></div>
<label>Reddit</label>
<input type="hidden" value="" name="bookmark[]" />
</li>
<li class="networkicon shr-newsvine" name="shr-newsvine">
<div></div>
<label>Newsvine</label>
<input type="hidden" value="" name="bookmark[]" />
</li>
</ul>
スクリプトのサンプル:
$(function() {
$("#selector").selectable({
filter: 'li',
selected: function(event, ui) {
$(".ui-selected").each(function() {
$(this).children('input').val($(this).attr('name'));
});
},
unselected: function(event, ui) {
$(".ui-selected").each(function() {
$(this).children('input').val('');
});
}
});
});