chosen.js ::有没有人有一个实际的工作示例？

有没有人使用和定制一些基本的chosen.js代码？chosen.js ::有没有人有一个实际的工作示例？

我已经下载了js，css和png，从示例中复制了一些代码，编写了我自己的超简单示例，但是我必须缺少一些东西。我已经验证了包含了code.jquery.js并被加载，与chosen.css一样。

当我尝试调出一个非常简单的SELECT字段（下拉列表）时，我得到一个非常小的字段，并且单击此字段不会执行任何操作。当我禁用chosen.js时，只需显示所有选项即可。

下面是如何添加一个简单的内jQuery的选择（我要动态填充领域，虽然在这个例子中它的所有硬编码）：

$html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">'; 
    $html += '<option value="foo">foo</option>'; 
    $html += '<option value="bar">bar</option>'; 
    $html += '<option value="baz">baz</option>'; 
    $html += '<option value="qux">qux</option>';  
    $html += '</select>';

然后，权当我显示模式对话框包含的选项，我呼吁：

$('.modal-body').html($html); 
$('.chosenElement').chosen();

到目前为止，我已经修改并测试各种排列，用Google搜索的解决方案或例子，但似乎没有任何工作。这可能是非常愚蠢的事情，就像某个地方缺少分号一样，但是我在这个“10分钟实施”上浪费了太多时间，以至于我需要寻求帮助。

https://github.com/harvesthq/chosen

来源

2011-09-26 Shawn Spencer

对于任何正在寻找'Chosen.js'在线托管图书馆的人，请参阅http://cdnjs.com/libraries/chosen –

你有目标选择

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

jsFiddle

来源

2011-09-26 22:21:06 Sinetheta

感谢您的反馈。也许你可以在问题中再次看看我的代码示例。最后一行代码指出我正在调用$（'。chosenElement'）。chosen（）;.我错过了什么吗？ –

我的坏，我没有读过过去的折叠。该代码工作正常http://jsfiddle.net/vWKrv/2/ – Sinetheta

你很有趣。我有时会做同样的事情。不管怎么说，还是要谢谢你。 ;-) –

如果动态填充字段，是JSON结果集回来瓦特/ “文本” 和 “值”属性？如果不是，Chosen将不会在列表中正确格式化结果。事实上，它根本不会添加它们。我很难学会这一点，因为我的结果最初是以“名称”和“ID”属性取而代之的。

来源

2012-08-03 15:42:58 WEFX

尝试从选择框中删除size =“1”属性和/或设置宽度较大的样式属性。选择底层选择框宽度时生成元素的宽度，所以如果您的选择框非常小，则选择选择也将如此。希望有所帮助。

来源

2013-04-26 15:37:18

包住jQuery代码内： -

$(document).ready(function(){ 
    $('.chosenElement').chosen(); 
});

来源

2013-09-24 21:01:34

遇到类似的问题。我没能找出什么在我的情况导致它这个工作：

$j('select').livequery(
    function(){ 
     $j(this).chosen({width: "300"}); 
     $j('.search-field input').height(14); 

    }, 
    function(){ 
     //remove event 
    });

来源

2013-10-23 01:22:51 user2909409

如果你真的想测试的“最基本”的例子，我建议：

在硬编码的HTML（VS动态添加HTML）工作
从select元素删除所有属性
只有一次的属性一个基本的例子运行正常添加回select元素。

注意，select元素的multiple="multiple"属性确实让chosen.js表现不同。

我已经跑到你的代码在这里：http://jsfiddle.net/99Dkm/1/

，它工作得很好。

我怀疑问题不是chosen.js库，而是你如何使用它（包装一些基本的jQuery onready功能丢失或其他）。

请注意，在我的jsFiddle工作示例中，我只包含chosen.css & chosen.jquery.js。

注：从http://cdnjs.com/libraries/chosen

来源

2014-06-13 10:09:58

的文档获取所选择的选项对这些文件（JavaScript的& CSS）的URL包括：

如果你的选择是时隐时选的是实例，你必须指定宽度或选择将显示宽度为0.

要避免出现零宽度字段，您需要使用“宽度”opti打开，或确保在您打电话给Chosen时看到您的原始选择。

来源

2017-10-20 10:29:46 rpeh

chosen.js ::有没有人有一个实际的工作示例？

回答

相关问题