1

我使用 Harvest 的 Javascript 库来增强<select>元素。

https://github.com/harvesthq/chosen

该库<div>与原始<select>. 这<div>包含选择的增强 UI：

<select multiple id="my-list" class="chosen">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<div class="chosen-container chosen-container-multi ..." id="my-list_chosen">
    <ul class="chosen-choices">
        <li class="search-choice">
            <span>Three</span>
            <a class="search-choice-close" data-option-array-index="2"></a>
        </li>
        <li class="search-choice">
            <span>Five</span>
            <a class="search-choice-close" data-option-array-index="4"></a>
        </li>
        ....
    </ul>
    ...
</div>

<div>鉴于我只知道原始<select>元素，我想检索这个 Chosen UI 容器 ( )。挑战在于 HTML 文档中可能有超过 1 个多选。

最简单的情况是<select>元素具有 ID，因此选择的 UI 容器具有相同的 ID，后缀为_chosen，如您在上面的代码片段中所见。

但是 Chosen 并不要求元素具有和 ID 属性才能工作。那么<select>没有ID的多个元素呢？识别选择的 UI 容器的正确方法是什么？

[编辑]对于那些想知道为什么我不能假设有一个“id”属性的人<select>：我写了一个小插件来处理 Chosen 的选择顺序，我不能强迫用户在<select>while Chosen上放置一个 ID不需要它本身。

4

3 回答 3

3

最后我找到了解决方法。Chosen 提供的容器没有合适的获取方式。

[更新]：根据Github 上的这个评论，“官方”没有正确的方法来使用 PrototypeJS 获取选择的 UI 元素。

使用 jQuery 插件

我查看了 Chosen 的 CoffeeScript 代码，发现了一些有趣的东西。如果您使用jQuery的 Chosen 插件，则 Chosen 实例通过jQuery data() 函数存储在本地。

您可以通过以下方式检索 Chosen UI 容器：

$(my_select).data("chosen").container[0]

一般情况

不幸的是，使用 PrototypeJS 插件，没有这样的技巧。

但是我们可以在一般情况下做一个假设：Chosen UI 容器是原始<select>元素的第一个下一个兄弟。这个假设是相当强的，因为除非有东西<select>动态地移动或选择容器，否则这将永远是正确的。

这是一个不错的解决方案，使用了 2 个不同的框架：

使用 PrototypeJS

my_select.next(".chosen-container.chosen-container-multi")

使用 jQuery

$(my_select).next(".chosen-container.chosen-container-multi").get(0)
于 2014-08-01T10:51:09.213 回答
1

这不是找到您要查找的内容的完美方法，但它在大多数情况下都可以使用，我建议在元素上放置一个 ID，或者如果您不想复制 id，您可以使用.identify()放置唯一 id 的方法在元素上，您只需要在调用 Chosen 之前执行 if。

如果您可以找到<select>带有 CSS 选择器的

$$('select').first().next('.chosen-container');
//OR
$$('select.classname').first().next('.chosen-container');
//etc

这取决于 DOM 的结构，这不是正常执行此操作的好方法，但 Chosen 很好地将呈现的下拉列表作为目标的兄弟姐妹<select>您的里程可能会有所不同

于 2014-07-30T23:33:25.540 回答
0

也许不完全是您要查找的内容，但 selected 的实例作为函数处理的第二个参数提供chosen:ready。您可以存储参考以chzn.container供以后使用。重要的部分是在调用之前附加事件处理程序.chosen()，例如：

$(".chosen").on("chosen:ready", function (event, chzn){
    // "this" is the select element
    // "chzn" is the chosen instance
    let container = chzn.container;
    // ...
}).chosen();
于 2021-03-18T09:42:45.807 回答