有没有办法在 jquery 中克隆 sumoselect 下拉菜单

Posted 2023-05-08

【中文标题】有没有办法在 jquery 中克隆 sumoselect 下拉菜单

【英文标题】：Is there any way to clone sumoselect dropdown in jquery

【发布时间】：2018-08-02 10:29:41

【问题描述】：

我正在使用jquery sumoselect 库来显示多选下拉菜单。 现在我想通过单击按钮来克隆这个下拉列表。 有什么方法可以实现吗？

$('#chtml').clone().attr('id', 'newid').appendTo('p'); 

我已经尝试了上面的代码，其中#chtml 是 td 的 id，其中我的多选下拉列表存在，我想将其复制到 <p></p> 标记中。

【问题讨论】：

发布一个工作代码 sn-p 展示您的问题。

你需要克隆 select 然后再次实例化 SumoSelect

这在 demo page 的控制台中工作，作为概念证明.. $('.testselect1').clone().appendTo(".highlight:eq(0)").SumoSelect();

您没有为任何问题选择答案。请在所有问题中解决您的问题的答案旁边打勾。

【参考方案1】：

您的尝试似乎有 2 个问题..

该库创建了<p> 标签，所以简单地附加到$("p") 实际上就是将选择元素插入到现有的SumoSelect 实例中。 库隐藏了原始的<select>，因此无论如何您都在附加一个不可见的选择元素。通过在克隆上调用 SumoSelect() 来解决此问题。

PS。真的不需要给它一个新的id，只需删除现有的即可。

$("#chtml").SumoSelect();

$("#chtml").clone().removeAttr("id").appendTo("#cloneGoesHere").SumoSelect();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.css" rel="stylesheet" />


<select name="somename" id="chtml" tabindex="-1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<p id=cloneGoesHere></p>