【问题标题】:Adding a button to select dropdown添加一个按钮来选择下拉菜单
【发布时间】:2020-08-08 10:17:06
【问题描述】:

我目前正在使用 selectize.js 作为我的下拉菜单,我想在选项列表的末尾添加一个按钮,例如 this

我尝试将跨度添加到选择组中,但它没有显示在下拉列表中。我应该如何更改我的代码以允许选项末尾的按钮,如图所示?

    $('#client').selectize();
<div class="form-group">
            <label>Client</label>
            <select id="client" type="text">
                <option value="0">Add New Client</option>
                <option value="1">Client 1</option>
                <option value="2">Client 2</option>
                <option value="3">Client 3</option>
            </select>
            <span class="input-group-addon" id="clear_addon">Clear</span>
        </div>

【问题讨论】:

  • 你不能,至少不能使用 actual 选择元素。一,除了option 之外,您不能在选择标签内放置任何其他标签。二,你找不到选择下拉菜单浏览器元素的高度,这意味着你将无法找到“底部”来创建一个绝对定位的按钮。您将需要使用您提供的图片中的自定义下拉菜单。 select2 是一个插件,可以将您的选择元素转换为漂亮的下拉菜单。
  • 使用 selectize 后在.innerHTML 中渲染

标签: javascript html selectize.js


【解决方案1】:

您可以修改插件的html,并在项目列表后附加一个按钮:

$('.selectize-dropdown').append('<button id="clear_addon">Clear</button>');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-12-12
    • 2012-10-27
    • 1970-01-01
    • 2020-10-18
    • 2021-09-29
    • 1970-01-01
    • 2016-08-19
    • 1970-01-01
    相关资源
    最近更新 更多