标签: jquery-chosen

Chosen和Select2是两个更受欢迎的库,用于扩展选择框.

两者似乎都得到了积极维护,Chosen更老,同时支持jQuery和Prototype.

Select2只是jQuery,它的文档说Select2的灵感来自Chosen,但没有详细说明所做的任何改进(如果有的话)或重写的其他原因.

两个库具有相同的功能集,我发现的唯一比较是一个有点不确定的jsperf测试页面.

这些库中是否有任何优势？

我正在尝试使用Chosen插件更改select中当前选择的选项.

该文档包括更新列表,并在选择选项时触发事件,但在外部更改当前选定的值时没有(我可以看到).

我已经制作了一个jsFiddle来演示代码和我试图改变选择的方法:

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

我有一个选择div,我正在使用所选的jquery插件来设置样式并添加功能(最值得注意的是,搜索).div看起来像这样,

 <select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
 <option value=""></option>
 </select>

我正在使用这样选择的插件,

 $('#foobar').chosen();

当一些AJAX正在加载时,我想禁用整个<select>div.也许有这样的事情,

 $('#foobar').disable()

或这个

 $('#foobar').prop('disabled', true)

我想你应该已经明白了.

关于如何做到这一点的任何想法？我已经尝试了很多不同的东西,比如使用jquery惯用法来禁用东西,禁用<select>它只是禁用底层选择,而不是选择它上面的东西.我甚至采取了手动添加另一个高的div而z-index只是灰色的盒子,但我认为这可能是丑陋和错误.

谢谢您的帮助!

我select在表单中有一堆元素,我正在使用Jquery Chosen插件.我该如何重置表格？以下不起作用:

<input type="reset" />

我有一些<select>使用所选插件的输入,我想在客户端验证为"必需".由于"selected"隐藏了实际的select元素并创建了一个包含div和spans的小部件,因此本机HTML5验证似乎无法正常工作.表单将不会提交(这是好的),但错误消息未显示,因此用户不知道什么是错的(这不好).

我已经转向jQuery验证插件(我计划最终使用它)但到目前为止还没有任何运气.这是我的测试用例:

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

这样可以select使用空值,而无需验证或显示错误消息.当我注释掉这chosen()条线时,它运行正常.

如何chosen()使用jQuery验证插件验证输入,并显示无效的错误消息？

我正在尝试清除jQuery Chosen下拉列表并刷新它.

HTML:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="" selected="selected"></option>
    <option value="x">remove me</option>
</select>

当我点击"刷新"按钮时,它应该变为:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="1">test</option>
</select>

我尝试过的:

$("#refreshgallery").click(function(){
    $('#picturegallery').empty();
    var newOption = $('<option value="1">test</option>');
    $('#picturegallery').append(newOption);
});

但我不能让它更新下拉列表...一些帮助？:)

我尝试了很多东西,似乎没有任何工作.

我正在使用jQuery和Chosen插件.

方法我尝试过:

var select = jQuery('#autoship_option');

select.val(jQuery('options:first', select).val());

jQuery('#autoship_option').val('');

jQuery('#autoship_option').text('');

jQuery('#autoship_option').empty('');

jQuery("#autoship_option option[value='']").attr('selected', true);

选择后,它始终显示Active Autoship选项.我似乎无法明确选择.

这是选择框:

<select id="autoship_option" data-placeholder="Choose Option..." 
style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>

任何熟悉选择并能够通过一个选项清除选择框的人？(将来会有更多选择.

如何从所选的多选框中获取所选值？

我像这样制作一个jQuery Chosen下拉列表:

$('.blah').chosen();

我找不到如何添加选项,例如:

$('.blah').chosen('add', name, value);

我正在使用selected.js插件http://harvesthq.github.com/chosen/和jQuery来允许用户从select中选择多个选项.但是,我现在希望能够让他们创造尚未存在的价值 - 任何想法如何解决这个问题？

编辑:与SO自己的标签选择/创建栏类似的东西将接近我所追求的

最好不要更改或编辑插件,但如果需要,也可以.

代码:HTML:

<p>Select something</p>
<select name="theSelect[]" multiple="multiple">
    <option value="First Option">First Option</option>
    <option value="Second Option">Second Option</option>
</select>

使用Javascript:

$(function(){
    $('select').chosen();
});

因此,如果用户输入"第三选项",我想将其添加到列表中并将其选中.值和显示名称是/将是相同的,所以这不是一个问题