これは以前からいろいろな形で質問されているのですが、納得のいく答えが見つからないので、具体的に質問したいと思います。
次のような選択ボックスがあります。
<select name="publicationID[]" id="publicationID[]" class="chzn-select-create-option" data-placeholder="Select Publication or type new..." style="width:550px;">
これは、ドロップダウン リストに要素を追加できるようにする、通常の選択のわずかに変更されたバージョンです (これは質問とは関係ありません)。
「別の出版物を追加」というボタンがあります。このボタンは、Ajax クエリを起動して、上記の要素、publicationID[] のコピーを作成します。
select 要素の ID が競合するため、クローンに適用されない問題が選択されています。ご覧のとおり、ID 名の配列バージョンを使用して、データを投稿した後に配列を反復処理できるようにしていますが、選択したスタイルがコピーに適用できない場合、これは適切ではありません。
私の最初の selected() 呼び出しは、要素のコピーを返した後に ajax で行われます。これは通常、この重複 ID のインスタンスを除いて正常に機能します。
(アヤックス)
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
(doChosen 関数)
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(".chzn-select-create-option").chosen({
create_option: function(term){
var chosen = this;
chosen.append_option({
value: term,
text: "New: " + term
});
},
persistent_create_option: true
});
}
ここで、フォーム全体で選択したスタイルを削除して再適用することについて話しているいくつかのソリューションを見てきましたが、従うのに十分単純な方法でこれを行っているものはありません。