7

有没有人使用和定制过一些基本的 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();

到目前为止，我已经修改并测试了各种排列，谷歌搜索解决方案或示例，但似乎没有任何效果。这可能是非常愚蠢的事情，比如某处缺少分号，但我在这个“10 分钟实施”上浪费了太多时间，所以我需要寻求一些帮助。

https://github.com/harvesthq/chosen

4

7 回答 7

5

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

  1. 处理硬编码的 HTML（与动态添加的 html 相比）
  2. 从select元素中删除所有属性
  3. select仅在基本示例运行良好后才将属性添加回元素。

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

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

它工作得很好。

我怀疑问题不在于chosen.js库，而在于您如何使用它（包装在一些基本的 jQuery onready 函数中丢失或其他）。

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

注意：从http://cdnjs.com/libraries/chosen获取这些文件（javascript 和 css）的 URL

于 2014-06-13T10:09:58.250 回答
1

您必须针对选择

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

jsFiddle

于 2011-09-26T22:21:06.510 回答
1

遇到了类似的问题。在我的情况下，我无法弄清楚是什么原因造成的：

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

    }, 
    function(){
         //remove event
    });
于 2013-10-23T01:22:51.587 回答
1

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

于 2012-08-03T15:42:58.850 回答
1

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

于 2013-04-26T15:37:18.253 回答
1

将 jQuery 代码包装在里面：-

$(document).ready(function(){
  $('.chosenElement').chosen();
});
于 2013-09-24T21:01:34.700 回答
1

有关已选择选项的文档包括：

如果在实例化 Chosen 时选择隐藏，则必须指定宽度，否则选择将以 0 的宽度显示。

为避免出现零宽度字段，您需要使用“宽度”选项，或者确保在调用 Chosen 时您的原始 Select 可见。

于 2017-10-20T10:29:46.360 回答