jquery-chosen 相关问题

Chosen是一个JavaScript插件，它使长而笨重的选择框更加用户友好。它目前有jQuery和Prototype两种口味。

使用 chzn-select 类时，<select>中的事件侦听器不起作用

我尝试为省份下拉列表创建一个 chzn-select 类。但是这个类让我的 addEventListener 不起作用。如果我删除它， addEventListener 将会工作，但我需要它来使用它

javascript html jquery jquery-chosen

回答 1 投票 0

无法点击选择的关闭按钮

我正在使用 Chosen 插件，并希望在单击 li 项目的“X”或关闭按钮时捕获事件。但是，该事件似乎没有被解雇或捕获。 $(document).on('点击', 'a.search-

jquery jquery-chosen

回答 4 投票 0

jQuery 选择：如何从多重选择中获取所选选项文本的数组

我正在使用 jQuery Chosen，我需要将多个选择的下拉列表中的每个选项文本放入数组中。我可以通过以下方式轻松获取数组中的所有值：我正在使用 jQuery Chosen，我需要将每个选项 text 放入多选下拉列表中的数组中。我可以用这个轻松获取数组中的所有值： <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); }); 根据选择的选项，它将返回一个值数组，如下所示： ['cty01', 'cty03', 'cty04'] 获取 text 而不是值相当于什么？ ['New York', 'Montreal', 'Paris'] 预先感谢您的帮助！ var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); var labels = []; for (var i = 0; i < values.length; i++) { var label = select_custom.find('option[value="'+values[i]+'"]').text(); labels.push(label); } console.log(labels); }); 我们基本上循环遍历每个值，在 <select> 字段中搜索与该值匹配的 <option> 标签，然后将其推送到 labels 数组。 var select_custom = jQuery("#select_custom"); var arr = []; select_custom.change(function(){ var text = $('#select_custom option:selected').text(); if(!arr.includes(text)) { arr.push(text); } console.log(arr); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> 您可以使用地图功能 https://api.jquery.com/jquery.map/ $("#select_custom").change(function() { var text = $(this).find('option:selected').toArray().map(item => item.text).join(); console.clear(); console.log(text); $("#result").text(text); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> <div id="result"></div> 一行即可获取选定文本或值的数组 var array_of_texts = $('#Your_multiple_select option:selected').toArray().map(item => item.text); 输出：[“文本1”，“文本2”] var array_of_values = $('#SelectQButton option:selected').toArray().map(item => item.value); 输出：[“值1”，“值2”]

javascript jquery arrays jquery-chosen

回答 0 投票 0

单击某个项目可取消选择它

有一个下拉多项选择，我想单击一个元素将其从选定的元素中删除。开箱即用的 selected.js 显然不能做到这一点，你如何修改它呢？我

javascript jquery jquery-chosen

回答 1 投票 0

如何只显示数字而不是选择的全部选中

我正在使用选定的下拉菜单插件，它的效果非常好，我面临的唯一一个问题是它通过多重选择增加高度这是插件 https://harvesthq.github.io/chosen/ 我正在使用选定的下拉菜单插件，它的效果非常好，我面临的唯一一个问题是它通过多项选择增加高度这是插件https://harvesthq.github.io/chosen/ <select data-placeholder="Choose a country..." multiple class="chosen-select"> $(".chosen-select").chosen(); 当我们选择多个选项时，它显示如下这样显示但我也希望它像这样显示所选选项的数量谢谢你所选 js 没有可用的默认方法。 $(document).ready(function(){ $(".chosen-select").chosen(); _setFilter(); $('.chosen-select').on('chosen:showing_dropdown', function(evt, params) { _resetFilter() }); $('.chosen-select').on('chosen:hiding_dropdown', function(evt, params) { _setFilter(); }); }); function _resetFilter() { $('.count_option').hide(); $('.search-field').show(); $('.search-choice').show(); _updateCount(); } function _setFilter() { if($('.count_option').length < 1) { $('.chosen-choices').append('<li class="count_option">States<span>0</span></li>'); } $('.count_option').show(); $('.search-field').hide(); $('.search-choice').hide(); _updateCount(); } function _updateCount() { var count = $(".chosen-select :selected").length; $('.count_option span').html('('+count+')'); } .chosen-choices, .count_option{ width: 300px !important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" /> <select data-placeholder="Choose a country..." multiple class="chosen-select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

jquery jquery-chosen

回答 0 投票 0

从所选jquery中删除多个属性

我有一个包含所选插件的下拉菜单 @Html.DropDownListFor(x => x.ML.AccountID, Model.Accounts, new { id = "ddl_account", @class = "表单控件 form-control-sm 选择-select&

javascript jquery asp.net-mvc jquery-chosen

回答 1 投票 0

动态添加选项以选择多个 jQuery 插件

我想添加用户在选定的选择多个输入的文本字段中输入的文本作为选项，并自动选择它，所有这一切当选项不存在时，如果选项 ex...

javascript jquery jquery-events jquery-chosen

回答 5 投票 0

选择的 jQuery 插件不更改 HTML 选择

我正在尝试将选择标签从 HTML 更改为示例中使用的标签选择 v1.8.7，但即使按照以下步骤进行操作，选择仍将继续作为默认选择：测试.html ...

javascript html jquery jquery-chosen

回答 1 投票 0

HTML：选择多个项目下拉列表

我在 Stack Overflow 上找到了以下代码。 $(".chosen-select").chosen({ no_results_text: "哎呀，没有找到任何东西！" }) <p>我在 Stack Overflow 上找到了以下代码。</p> <pre><code>$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script> <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/> <form action="http://httpbin.org/post" method="post"> <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test"> <option value=""></option> <option>American Black Bear</option> <option>Asiatic Black Bear</option> <option>Brown Bear</option> <option>Giant Panda</option> <option>Sloth Bear</option> <option>Sun Bear</option> <option>Polar Bear</option> <option>Spectacled Bear</option> </select> <input type="submit"> </form> </code></pre> <p>在这个问题中： <a href="https://stackoverflow.com/questions/30190588/html-select-multiple-as-dropdown">HTML：选择多个作为下拉列表</a></p> <p>但是我的实现不起作用。</p> <p>我复制了上面的代码（没有第一部分 $）并将其粘贴（不加修改）到我的 .php 页面中。然后我尝试运行代码，但我的输出如下所示。</p> <p><a href="https://i.stack.imgur.com/9x60m.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzl4NjBtLnBuZw==" alt="My output"/></a></p> <p>除了代码片段中的三个之外，我不包含任何其他库或其他代码。我应该做什么才能让它发挥作用？</p> </question> <answer tick="false" vote="2"> <p>您只需为选择列表添加 <strong>multiple</strong> 属性，即可将其用作多选列表。</p> <p>以下是示例代码：</p> <pre><code><select multiple id="select"> <option>Opt. 1</option> <option>Opt. 2</option> <option>Opt. 3</option> </select> </code></pre> </answer> <answer tick="true" vote="0"> <p>看来你在加载库文件之前运行了这个函数<pre><code>$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" })</code></pre>。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> $(document).ready(function() { $(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) });</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script> <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/> <form action="http://httpbin.org/post" method="post"> <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test"> <option value=""></option> <option>American Black Bear</option> <option>Asiatic Black Bear</option> <option>Brown Bear</option> <option>Giant Panda</option> <option>Sloth Bear</option> <option>Sun Bear</option> <option>Polar Bear</option> <option>Spectacled Bear</option> </select> <input type="submit"> </form></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>所以要解决这个问题，我必须添加</p> <pre><code>$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) </code></pre> <p>进入脚本标签，现在它开始工作了。（我之前忽略了它，认为它在某种意义上工作/不工作没有效果）。</p> </answer> </body></html>

javascript php html jquery jquery-chosen

回答 0 投票 0

选择的更新不起作用

我有一个选择的下拉菜单。我更改了选项内容并调用触发器选择：更新但选择不重建下拉列表。这是我更新的我有一个选择的下拉菜单。我更改了选项内容并调用触发器选择：更新但选择不重建下拉列表。这是我的更新 <select name="shortcode" style="width: 150px; display: none;" class="chosen_select chzn-done" id="select_shortcode"> <option value=""></option> <option value="7183">7183</option> <option value="7983">7983</option> </select> 这是选择的下拉列表（应该重建并删除最后两个<li>） <ul class="chzn-results"> <li id="select_shortcode_chzn_o_1" class="active-result" style="">7183</li> <li id="select_shortcode_chzn_o_2" class="active-result" style="">7983</li> <li id="select_shortcode_chzn_o_3" class="active-result" style="">8208</li> <li id="select_shortcode_chzn_o_4" class="active-result" style="">8308</li> </ul> 这是我的 jQuery 代码： $('#select_shortcode_mask').change(function(){ var shortcode_mask = $('#select_shortcode_mask').val(); $('#select_shortcode').empty(); var shortcode = {"7X83":["7183","7983"],"8x08":["8208","8308"]}; $('#select_shortcode').append("<option value=''></option>"); if(jQuery.isArray(shortcode[shortcode_mask])){ $.each( shortcode[shortcode_mask], function( subkey, subvalue ) { $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>"); }) } else { var full_shortcode = ["7183","7983","8208","8308"]; if(jQuery.isArray(full_shortcode)){ $.each(full_shortcode, function( subkey, subvalue ) { $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>"); }) } } $("#select_shortcode").trigger("chosen:updated"); }); 已解决：我使用旧版本，所以应该： $("#select_shortcode").trigger("liszt:updated"); 所以扔掉^^ 我经常使用所选插件，当然我不止一次遇到这个问题。正常使用.trigger("chosen:updated")即可解决。但就在一分钟前，这个方法不再起作用了，我感到很困惑，因为我在2个js文件中使用了相同的函数，比如说a.js和b.js，它在a.js中起作用，但是不适用于 b.js。我不明白为什么...我几乎失去了理智！！！所以，我再次检查了api。我发现了.chosen("destroy")，启发了我！我认为这是终极解决方案：摧毁它并重建它。 $('.chosen').chosen("destroy").chosen(); 我声音太大了吗？：p 您的更改函数调用元素“#select_shortcode_mask”的更改。您的选择列表的 ID 为：“#select_shortcode” 代码： $('#test') .val(1) .trigger('liszt:update') .removeClass('chzn-done'); $('#test_chzn').remove(); $("#test").chosen({ width: "220px", no_results_text: "test" }); 我的方法是这样的... $timeout(function() { $('#CampSrchId').trigger('chosen:updated'); }, 1000); 或 window.setInterval(function() { $('#CampSrchId').trigger('chosen:updated'); }, 1000); 我知道这是一个老问题，但没有一个确切的解决方案对我有用，所以我结合了@Kaiyu Lee 和@Jamie 代码，效果很好！ $('#your-select-dropdown-id').chosen("destroy").chosen(); $('#your-select-dropdown-id').chosen({ width: "100%" }); 非常感谢你们俩，也不要忘记触发（'change'）；如果您的下拉菜单依赖于另一个下拉菜单，则也可以在页面加载/文档准备就绪时进行。我用过 $("select").chosen({ width: "100%" });//chosen hack 与使用.trigger("chosen:updated");时一样，这似乎并没有解决问题。它看起来很老套，但效果很好。就我而言，这是因为两次包含 jQuery（一次在头部，一次在页脚）... 我删除了页脚中的那个，.trigger('chosen:updated');就像一个魅力！它对我来说也不起作用。然后我决定将启动的控制分配给一个变量并使用该变量重写顺序调用。这解决了问题。 <script type="text/javascript"> var bs = $('#BookSets').chosen(); function b1onclick() { bs.trigger("chosen:updated"); } .... $('.select-chosen').chosen({width: "100%"});

jquery jquery-chosen

回答 0 投票 0

重置选择的 JQuery 下拉列表

所以我有多个相互依赖的下拉菜单。单击按钮时，如果每个下拉菜单都有一个值，它将执行某些操作，并且还将清除选项并重新生成...

javascript jquery jquery-chosen

回答 0 投票 0

Js selected，select选项有更新时如何更新下拉列表

我使用选择的js作为我的选择选项但就我而言，有一些按钮可以触发某些部分被隐藏，所以我想更新我的下拉列表以隐藏该部分。这在教派之前...

javascript jquery dropdown jquery-chosen

回答 0 投票 0

通过javascript功能选择选择的选项

我一直在尝试实现《如何在jQuery的SELECT元素中选择一个特定的选项》中提出的解决方案，但没有用。要不就是加入了Chosen的组合，使得这个解决方案 ...