jQuery Chosenプラグインを使用しており、ユーザーがチェックボックスの近くにいるときに、完全なDiv コンテンツを別の div に移動しようとしています。
問題は、チェックボックスをクリックすると、div が正しくレンダリングされず、Chosen 情報が失われ、結果が醜いことです。
私が持っているHTML:
Div A:<br />
<div id="divA">
</div>
Div B:<br />
<div id="divB">
<div>
<input type="checkbox" id="chkChosen" value="1" />
<select data-placeholder="Testing" id="selectChosen" class="chzn-select" multiple="multiple" style="width:350px;">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
</div>
Javascript コード:
$("#selectChosen").chosen();
$('#chkChosen').change(function () {
if ($(this).prop('checked')) {
$('#divB div').hide().appendTo('#divA').fadeIn('fast');
} else {
$('#divA div').hide().appendTo('#divB').fadeIn('fast');
}
});
動作例(通常の選択) と問題(jQuery Chosen)の両方で jsFiddle を作成しました: http://jsfiddle.net/Moonlight/fRHhh/1/
なにが問題ですか?「appendTo」はすべてをコピーすると思いました。
編集:私が達成しようとしていることの新しい例を作成しました: http://jsfiddle.net/Moonlight/fRHhh/5/