如何维护selected的选择顺序并按选择的顺序传递值

2023-12-22

<div>
    <em><label for="multiple-label-example">Click to Highlight Multiple Select</label></em>
    <select id="multiple-label-example" name="cond-fields[]" tabindex="-1" style="width: 350px; display: none;" class="chosen-select" multiple="" data-placeholder="Your Favorite Types of Bear">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option selected="">Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option> 
        <option>Spectacled Bear</option>
    </select>
    <div class="chosen-container chosen-container-multi" style="width: 350px;" title="" id="multiple_label_example_chosen">
        <ul class="chosen-choices">
            <li class="search-choice"><span>Giant Panda</span>
                <a class="search-choice-close" data-option-array-index="4"></a>
            </li>
            <li class="search-field">
                <input type="text" style="width: 25px;" autocomplete="off" class="" value="Your Favorite Types of Bear" tabindex="18">
            </li>
        </ul>
        <div class="chosen-drop">
            <ul class="chosen-results">
                <li class="active-result" style="" data-option-array-index="1">American Black Bear</li>
                <li class="active-result" style="" data-option-array-index="2">Asiatic Black Bear</li>
                <li class="active-result" style="" data-option-array-index="3">Brown Bear</li>
                <li class="result-selected" style="" data-option-array-index="4">Giant Panda</li>
                <li class="active-result" style="" data-option-array-index="5">Sloth Bear</li>
                <li class="active-result" style="" data-option-array-index="6">Sun Bear</li>
                <li class="active-result" style="" data-option-array-index="7">Polar Bear</li>
                <li class="active-result" style="" data-option-array-index="8">Spectacled Bear</li>
            </ul>
        </div>
    </div>
</div>

如何保持选择的选择顺序。 我在表单中选择以下顺序Brown Bear, Asiatic Black Bear , Giant Panda , American Black Bear

但它传递的值如下

cond-fields[]  - American Black Bear
cond-fields[]  - Asiatic Black Bear
cond-fields[]  - Brown Bear
cond-fields[]  - Giant Panda

如何维护选定的顺序并按选定的顺序传递值, 演示链接是http://harvesthq.github.io/chosen/ http://harvesthq.github.io/chosen/


这个问题已经在这里得到解决:

  • 选择的 jQuery 插件:按照单击的顺序获取多个选择值 https://stackoverflow.com/questions/21659224/chosen-jquery-plugin-get-multiple-select-values-in-the-order-they-were-clicked
  • 选择:保持多项选择顺序 https://stackoverflow.com/questions/12395503/chosen-keep-multiple-selection-order
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何维护selected的选择顺序并按选择的顺序传递值 的相关文章

随机推荐

  • 在node.js中使用python模块

    是否可以创建一种胶水 使 python 模块 更具体地说 库绑定 可以在 Node js 中使用 一些数据结构可以直接映射到 V8 对象 例如数组 字典 更重要的是 这会是比手动或通过 FFI 更优雅的创建绑定的方式吗 简而言之 值得吗 试
  • 更改seaborn条形图中的色标

    我想对我的数据使用seaborn条形图 并根据Y轴的值使用色标 例如 在此图像中 颜色根据调色板从左到右变化 但我真正想要的是相同的配色方案 但 垂直 而不是 水平 这可能吗 我已经搜索并尝试设置hueY 轴参数 但它似乎不起作用 我该怎么
  • 为什么 std::chrono::time_point 不够大,无法存储 struct timespec?

    我正在尝试最近的std chronoapi 和我发现在 64 位 Linux 架构和 gcc 编译器上time point and duration类无法以最大分辨率 纳秒 处理操作系统的最大时间范围 事实上 相比之下 这些类的存储似乎是
  • 谷歌地图v3:边界中心与地图中心不同

    怎么可能map getCenter 可能不同于map getBounds getCenter gt cragMap getCenter gt Q d 13 823563748466814 e 0 toString function b fu
  • Jupyter 笔记本注释快捷方式不起作用

    我试图使用 ctrl 在 jupyter 笔记本中注释行 但这不起作用 我使用的是 Windows 10 和 Mozilla Firefox 您的问题可能是由于您的浏览器设置造成的 ctrl 必须设置为其他值 否则您不会处于编辑模式
  • 如何让Hibernate在与JPA一起使用时自动在数据库中创建表?

    我是 JPA 的新手 现在我正在尝试理解标准示例 我在网上阅读并看到了一些 stackoverflow 问题 我在所有这些问题中发现以下语句将允许 hibernate 在运行时创建表 hibernate hbm2ddl auto creat
  • 如果我没有接住投掷会发生什么?

    这是非常基本的 但我在任何地方都找不到答案 那里有很多关于投掷和接球的帖子 但如果我实际上会发生什么throw from function1然后打电话function1 from function2但不要抓住它 这是否意味着它只是被重新抛出
  • 如何在不指定父字段的情况下直接查询嵌套字段?

    我在 mongodb 中有接下来的 3 个文档 文件1 name device1 camera number 3 文件2 name device2 camera number 1 文件3 name device3 wifi number 2
  • ng 选择样式组标题和项目

    我正在使用 ng select https ng select github io ng select data sources https ng select github io ng select data sources 我的角度项目
  • 如何防止浏览器将 ß 更改为 ss?

    我试图让以下德语字符正确显示 不幸的是 它显示为 ss 我尝试遵循我在以下位置找到的一些指示 如何在 HTML 中正确显示德语字符 https stackoverflow com questions 423693 how can i pro
  • 我可以使元素对悬停不可见吗?

    我有一个具有星爆效果 透明 png 背景 的 div 我想在它们悬停时将其叠加在一系列图像上 我必须使 div 变大才能包含图像 但这会妨碍检测图像上的悬停 我将它们全部作为背景图像 因此它们是通过高分辨率 css mediaquery 加
  • Java中的文件截断操作

    在 Java 中截断文件的最佳实践方法是什么 例如这个虚拟函数 只是作为一个例子来阐明意图 void readAndTruncate File f List
  • Nest Battery CamGenerateWebRtcStream 命令出现 INVALID_ARGUMENT 错误

    我正在尝试执行sdm devices commands CameraLiveStream GenerateWebRtcStream https developers google com nest device access traits
  • istream::getline 返回类型

    什么是istream getline方法返回 我这样问是因为我已经看到要循环遍历文件 应该这样做 while file getline char int handle input 被退回的是什么 它返回一个流 以便我们可以链接操作 但是 当
  • 在 github 上怎么说这是我

    我在设置 GitHub 信息时犯了一个错误 因此当我推送到存储库 X 时 出现的名称不是我的名字 我该如何修复它并说那是我 有什么办法可以做到这一点吗 在 BitBucket 中 存储库管理页面中有一个名为 用户名别名 的选项 注意 我是存
  • hg unshelve 好像没有效果?

    我们的团队刚刚开始使用 Mercurial 我们首先开始玩的事情之一是hg shelve 在本地 我可以毫无问题地搁置更改 据我所知 一切都很完美 但是 当我尝试取消搁置时 我得到了restoring backup files消息 但是当我
  • 5 位 zip 或空的正则表达式

    我有这个正则表达式来检查 5 位数字 d 5 我如何更改它 以便它对于空字符串也返回 true 将其封装在 并添加一个 使整个模式可选 实际上 您要么匹配 d 5 OR 空字符串 var regex d 5 console log rege
  • CakePHP:是否可以插入具有预定义主键值的记录?

    我有一个 CakePHP 模型 用户 与外部公司系统有联系 我在这些系统上存储一些数据 在本地存储其他数据 在我的User beforeSave 方法 我尝试设置一个 ID 将数据 使用该自定义 ID 发送到我的公司系统 然后 如果它在那里
  • QMediaPlayer 在 Ubuntu 16.04 / Qt 5.6 上不播放任何内容

    我在 Ubuntu 16 04 上使用官方 Qt 5 6 SDK 当我尝试播放 mp3 文件时 我得到 defaultServiceProvider requestService no service found for org qt pr
  • 如何维护selected的选择顺序并按选择的顺序传递值

    div em em div