Question

我正在使用Flat-UI（http://designmodo.github.io/Flat-UI/）来帮助我正在构建的小型MeteorJS应用程序的前端元素。

我遇到的问题是选择下拉列表无法正常工作。我想知道如何获得期权价值。请参阅以下标记：

<div class="select2-container form-control select select-primary" id="s2id_autogen1">
    <a href="javascript:void(0)" class="select2-choice" tabindex="-1">   
        <span class="select2-chosen" id="select2-chosen-2">My Profile</span>
        <abbr class="select2-search-choice-close"></abbr>   
        <span class="select2-arrow" role="presentation">
            <b role="presentation"></b>
        </span>
    </a>
    <label for="s2id_autogen2" class="select2-offscreen"></label>
    <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2">
</div>
<select class="form-control select select-primary" data-toggle="select" tabindex="-1" title="" style="display: none;">
    <optgroup label="Profile">
        <option value="0">My Profile</option>
        <option value="1">My Friends</option>
    </optgroup>
    <optgroup label="System">
        <option value="2">Messages</option>
        <option value="3">My Settings</option>
        <option value="4">Logout</option>
    </optgroup>
</select>

这是我们在flatui文件中的内容。但选择下拉列表无法正常运行，有人可以帮助我使其工作并从选项中获取价值吗？

Answer 1

由于无法对系统进行样式化，因此我们进行了自定义选择。它基于Select2插件，稍微修改了源代码以满足Bootstrap命名约定。

Select2 3.5.2

检查一下： http://select2.github.io/select2/

$("#selectList")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })

Answer 2

如果您仔细阅读文档，您会发现已手动添加select2调用以转换所有选择。

E.g。像这样：

$( document ).ready(function() {
  $("select").select2({dropdownCssClass: 'dropdown-inverse'});
});

Flat-ui选择下拉列表无法正常工作

2 个答案: