SelectBoxIt Jquery プラグインを使用しようとしましたが、動的に作成された選択ボックスの表示および無効化されたプロパティに問題があります。つまり、元の選択ボックスに「display:none」CSS プロパティがある場合、SelectBoxIt は引き続きそれを表示します。非表示のコンテナ div に選択ボックスを挿入して、この問題を回避しました。ただし、コンテナーの div が表示されると、selectboxit は正しく表示されますが、現在は無効になっています。これを修正する方法について手がかりはありますか?
HTML コード:
<div>
<select name="sel" id="sel">
<option value="0">Select this</option>
<option value="1">Select that</option>
</select>
</div>
<div id="seladd_xx" style="display:none">
<select name="seladd[]" id="sel_xx">
<option value="0">Select this now</option>
<option value="1">Select that now</option>
</select>
</div>
<button type="button" id="addbtn_unit" class="addmore" style="font-weight: bold;font-size:11px">Add More</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.2.0/jquery.selectBoxIt.min.js"> </script>
Jクエリコード:
<script type="text/javascript">
$(document).ready(function(){
$("select").selectBoxIt();
id=0;
$('.addmore').click(function(){
newUnit($('#seladd_xx'));
})
function newUnit(element) {
var newElement = element.clone(true);
if(id <10)id = "0"+id;
newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
$('select', newElement).each(function() {
var yyid = $(this).attr("id").split("_")[0] + '_' + id;
$(this).attr('id', yyid);
});
$('#seladd_xx').before(newElement);
newElement.show('fast');
id++;
}
})
</script>