Question

有没有人使用和定制过一些基本的selected.js代码？

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

当我尝试调出一个非常简单的SELECT字段（下拉列表）时，我得到一个非常小的字段，并且单击该字段什么都不做。当我禁用selected.js时，我只需显示所有选项的SELECT。

这是我如何在jQuery中添加一个简单的SELECT（我必须动态填充该字段，尽管在这个例子中它都是硬编码的）：

    $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

Answer 1

如果你真的想测试最基本的＆＃34;例如，我建议：

处理硬编码HTML（与动态添加的html相比）
从select元素
只有在基本示例运行正常后才能将属性添加回select元素。

请注意，multiple="multiple"元素上的select属性确实使chosen.js的行为有所不同。

我在这里运行了您的代码：http://jsfiddle.net/99Dkm/1/

它运作得很好。

我怀疑问题不是chosen.js库，而是你如何使用它（包含一些基本的jQuery onready函数缺失或者其他）。

请注意，在我关于jsFiddle的工作示例中，我只包括chosen.css＆amp; chosen.jquery.js。

注意：从http://cdnjs.com/libraries/chosen获取这些文件的网址（javascript＆amp; css）

Answer 2

您必须定位选择

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

jsFiddle

Answer 3

当您动态填充字段时，JSON结果集是否会返回“Text”和“Value”属性？如果不是，Chosen将不会在其列表中正确格式化结果。事实上，它根本不会添加它们。我很难学到这一点，因为我的结果最初是用“名称”和“ID”属性回来的。

Answer 4

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

Answer 5

将jQuery代码包装在内： -

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

Answer 6

陷入类似的问题。在我的情况下，我无法找出导致它的原因：

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

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

Answer 7

选择选项的文档包括：

如果在实例化选择时隐藏了选择，则必须指定宽度或选择将显示宽度为0。

为避免出现零宽度字段，您需要使用“宽度”选项，或确保在调用“选择”时可以看到原始“选择”。

chosen.js ::有没有人有实际工作的例子？

7 个答案: