0

最初に言いたいのは、私はjQueryとjavascriptにかなり慣れていないということです。jQuery searchable dropdown plugin (ソースコードです)というプラグインを使用しようとしています。また、Select2 と Chosen も試しましたが、気に入らず、カスタマイズが難しく、バグがあります。

私のページでは、ユーザーは新しい選択入力を追加できます (機能が必要です)。これにより、このプラグインで視覚的な問題が発生します。

簡単なデモ (jsfiddle.Net/sf42v/) を作成し、「新しい入力を追加」を数回クリックすると、最初に選択した入力がどんどん大きくなっていることがわかります。

まず、この投稿を読んでいただきありがとうございます。この問題の解決方法を教えていただければ幸いです。

後世のデモコード:

html

<button type='button' id='addItem'>Add new input</button>
<form id='inputs'>
    <div>
        <select class='selectSearch'>
            <option>Test1</option>
            <option>Test2</option>
            <option>Test3</option>
        </select>
    </div>
</form>

js

$('.selectSearch').searchable();

var container = $('#inputs');

$('#addItem').on('click', function () {
    $("<div><select class='selectSearch'><option>Test1</option><option>Test2</option><option>Test3</option></select></div>").appendTo(container);
    $('.selectSearch').searchable();
    lenght++;
});
4

1 に答える 1

0

プラグインを追加するたびに、すべての選択でプラグインを初期化しています。

代わりに、次のようなことができます。

var container = $('#inputs');
$('#addItem').on('click', function () {
    var newSelect = $("<div><select class='selectSearch'><option>Test1</option><option>Test2</option><option>Test3</option></select></div>");
    newSelect.appendTo(container);
    newSelect.find(".selectSearch").searchable(); // only apply to the new select
});

http://jsfiddle.net/sf42V/1/

于 2013-08-04T10:15:47.323 に答える