JQuery插件，用于逐步增强选择下拉列表到多列显示

Anyone know of a jquery plugin that can convert the contents of a select drop-down list to a multi-column panel? Ideally, I would want to also support option groups, so that all the items in a group would stay together in a single column. Here is an example of what I mean:

有人知道一个jquery插件，可以将选择下拉列表的内容转换为多列面板吗？理想情况下，我还想支持选项组，以便组中的所有项目可以保持在一个列中。这是我的意思的一个例子：

1 个解决方案

#1

Well I don't know of a plugin that does that and in fact I've never seen that behavior before (your link is broken at the time of this answer).

好吧，我不知道有一个插件可以做到这一点，事实上我以前从未见过这种行为（你的链接在这个答案的时候被打破了）。

But I don't think it would be that hard using a modal dialog of some kind (there's one that comes with the jQuery UI). With that you could do something like:

但我不认为使用某种形式的模式对话会很难（jQuery UI附带的那种）。有了这个，你可以做一些事情：

<div id="#yearList">
    <a href="1990">1990</a>
    <a href="1991">1991</a>
    <a href="1992">1992</a>
</div>

<select id="#yearSelect">
    <option value="choose">Choose Year</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
</select>

$('#yearList').dialog();

$('#yearSelect').change(function() {
    if ($(this).val() == 'choose') {
        $('#yearList').dialog('open');
    }
});

$('#yearList a').live('click', function(e) {
     e.preventDefault();
     $('#yearSelect').val($(this).text());
     $('#yearList').dialog('close');
});

Obviously in a real world scenario you would load the dialog links and select options dynamically which is why I made the click event based on live.

显然，在现实世界的场景中，您将加载对话框链接并动态选择选项，这就是我基于实时制作点击事件的原因。