javascript - Select2 jQuery 控件显示两个下拉列表？

Question

我正在使用select2在 Node.js 网页上显示列表。当页面显示时，我看到一个下拉列表和一个具有当前选定值的 SPAN。但是，正在发生以下奇怪的行为：

• 如果在内部单击， SPAN 元素还会显示选项的下拉列表，而不仅仅是下拉列表框（见图）。
• 我附加到成为select2实例的 SELECT 元素的“select2:selected”事件处理程序仅在我从 SPAN 显示的下拉列表中选择一个项目时触发，而不是在我从主下拉列表中选择一个项目时触发。（见下面的代码片段）。

我立即发现它所呈现的 SPAN 元素select2是多么令人费解和嵌套，尤其是最后一个带有下拉包装类的子 SPAN 元素。但我不知道我在做什么可能会导致select2控件输出此输出。（请参阅下面的 SELECT2 渲染的元素部分）。

为什么我会出现这种奇怪的“双重”下拉列表行为和奇怪的事件处理程序触发情况？我只想要一个下拉框，当所选元素更改时更新 SPAN，并触发“select2:selected”事件。我不希望 associatd SPAN 元素执行任何操作，只显示当前选定的值。

带有主要下拉列表的屏幕截图显示：

---

带有二次不需要的下拉列表显示的屏幕截图（跨度元素）：

SELECT2 渲染的元素（来自 Chrome DevTools Elements 屏幕）

<td id="asset-symbol-td">
    <select id="crypto-symbol-select2-div" class="crypto-symbol-select2 select2-hidden-accessible" data-select2-id="select2-data-crypto-symbol-select2-div" tabindex="-1" aria-hidden="true">
        <option value="007" data-select2-id="select2-data-2-mnlq">007 - 007 coin</option>
        ... // Deleted other option rows for brevity's sake.
    </select>
    <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="select2-data-1-0hvk" style="width: 22px;">
        <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-crypto-symbol-select2-div-container" aria-controls="select2-crypto-symbol-select2-div-container">
                <span class="select2-selection__rendered" id="select2-crypto-symbol-select2-div-container" role="textbox" aria-readonly="true" title="NEO - NEO">
                    NEO - NEO
                </span>
                <span class="select2-selection__arrow" role="presentation">
                        <b role="presentation"></b>
                </span>
            </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true">
        </span>
    </span>

</td>

附加“选定”处理程序的 JAVASCRIPT 代码

// Bind the "selected" event to the the funcChange function
//  we were passed during construction.  Pass it the value selected.
$('#crypto-symbol-select2-div').on("select2:select", function (e) {
    const valSelected = $(self.select2DivId).select2().val();
self.funcOnChange(valSelected);
});

“选择”元素的 JADE (HTML)

select(id="crypto-symbol-select2-div" class="crypto-symbol-select2")

标签： javascripthtmljquerylistboxjquery-select2