jQuery可搜索下拉插件错误

jQuery searchable dropdown plugin bug

本文关键字：插件 错误 搜索 jQuery      更新时间：2023-09-26

首先，我对jQuery和javascript还很陌生。我正在尝试使用名为jQuery可搜索下拉插件的插件（它是源代码）。我也试过Select2和Chosen，但我不喜欢它们，很难定制和bug。

在我的页面上，用户可以附加新的选择输入（必须具有功能），这会导致该插件出现一些视觉问题。

我创建了一个简单的演示（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++;
});

您正在初始化上的插件，每次添加一个时都会选择。

你可以这样做；

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/

相关文章：