我使用js库select2。这是我现在拥有的屏幕截图:
开始:
点击下拉菜单:
现在是否可以从一个输入字段开始,而不是直接使用下拉列表?我知道这是可能的,因为您可以在 select2 网站上找到它。一个例子是这样的:
但是文档非常简短。这就是我现在拥有的:
<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/>
function createQuestionTags(data, question_number){
$(".question" + question_number).select2({
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
data: data,
placeholder: "Enter Question",
allowClear:true
});
}
(数据是从ajax调用接收的)
在该示例中,您看到的实际上是一个多选或多值下拉框。它不是像您在代码中使用的那样的单个值下拉框。根据 Select2 网站,select2 将检测到您正在尝试使用多选框,并将自动应用该样式而不是默认样式(下拉箭头等)。
如果您实际上需要一个单值下拉框,则没有直接的方法可以使其以多选的格式显示,使其看起来像常规输入框。可能有一种方法可以通过添加或删除 CSS 类来伪造它。我玩了一会但没找到。
由于您不需要格式、搜索框或多选功能(我假设),因此您可能不需要使用 select2 库。
更新:看来您不是第一个尝试这样做的人。他们计划添加此功能,但可能需要一段时间: https://github.com/select2/select2/issues/1345
我能想到的唯一解决方法是在设置时同时使用
multiple: true
和 maximumSelectionSize: 1
。
请在此处查看我的示例:http://jsfiddle.net/DanEtchy/Lnf8j/
这在 Select2 4.0.0 中可以通过新的选择适配器实现。您可以将
SingleSelection
替换为 MultipleSelection
(包括任何相关的装饰器),它应该按预期运行。
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/dropdown',
'select2/dropdown/attachBody',
'select2/dropdown/closeOnSelect',
'select2/compat/containerCss',
'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
var SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
CloseOnSelect
),
AttachBody
);
$('.inline-search').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: SelectionAdapter
});
$('.dropdown-search').select2({
selectionAdapter: MultipleSelection
});
$('.autocomplete').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
containerCssClass: 'select2-autocomplete'
});
});
.select2-selection__choice__remove {
display: none !important;
}
.select2-container--focus .select2-autocomplete .select2-selection__choice {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box</p>
<select style="width: 200px" class="inline-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the search box in the dropdown</p>
<select style="width: 200px" class="dropdown-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the selection hidden when it is focused</p>
<select style="width: 200px" class="autocomplete">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
默认情况下,Select2 将设置下拉列表以进行搜索(而不是选择容器),如果您想完美模拟多选,则需要覆盖该搜索。
就我而言,我希望用户从下拉列表中进行的选择显示在下拉列表下方的列表中,而不是像常规下拉列表一样工作。所以这个解决方法对我有用:
$('#myselect').select2({
multiple:true
})
.on('select2:select', function (e) {
//clear the input box after a selection is made
$(this).val([]).trigger('change');
});
当然,如果您希望所选项目在 select2 的输入框中保持选中状态,就像使用常规 select2 多选列表一样,那么这是行不通的。
使用 Bootstrap 样式自定义实现,简单但实用:
var elements = $(document).find('select.form-control');
for (var i = 0, l = elements.length; i < l; i++) {
var $select = $(elements[i]), $label = $select.parents('.form-group').find('label');
$select.select2({
allowClear: false,
placeholder: $select.data('placeholder'),
minimumResultsForSearch: 0,
theme: 'bootstrap',
width: '100%' // https://github.com/select2/select2/issues/3278
});
// Trigger focus
$label.on('click', function (e) {
$(this).parents('.form-group').find('select').trigger('focus').select2('focus');
});
// Trigger search
$select.on('keydown', function (e) {
var $select = $(this), $select2 = $select.data('select2'), $container = $select2.$container;
// Unprintable keys
if (typeof e.which === 'undefined' || $.inArray(e.which, [0, 8, 9, 12, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 44, 45, 46, 91, 92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 124, 144, 145, 224, 225, 57392, 63289]) >= 0) {
return true;
}
// Already opened
if ($container.hasClass('select2-container--open')) {
return true;
}
$select.select2('open');
// Default search value
var $search = $select2.dropdown.$search || $select2.selection.$search, query = $.inArray(e.which, [13, 40, 108]) < 0 ? String.fromCharCode(e.which) : '';
if (query !== '') {
$search.val(query).trigger('keyup');
}
});
// Format, placeholder
$select.on('select2:open', function (e) {
var $select = $(this), $select2 = $select.data('select2'), $dropdown = $select2.dropdown.$dropdown || $select2.selection.$dropdown, $search = $select2.dropdown.$search || $select2.selection.$search, data = $select.select2('data');
// Above dropdown
if ($dropdown.hasClass('select2-dropdown--above')) {
$dropdown.append($search.parents('.select2-search--dropdown').detach());
}
// Placeholder
$search.attr('placeholder', (data[0].text !== '' ? data[0].text : $select.data('placeholder')));
});
}
/* !important not needed with less */
.form-group {
padding: 25px;
}
.form-group.above {
position: absolute;
bottom: 0; left: 0; right: 0;
}
.select2-container--open .select2-selection {
box-shadow: none!important;
}
.select2-container--open .select2-selection .select2-selection__arrow {
z-index: 9999; /* example */
}
.select2-dropdown {
/* .box-shadow(@form-control-focus-box-shadow); (from select2-boostrap */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
/* border-color: @input-border-focus; */
border-color: #66afe9;
border-top-width: 1px!important;
border-top-style: solid!important;
/* border-top-left-radius: @input-border-radius; */
border-top-left-radius: 4px!important;
/* border-top-right-radius: @input-border-radius; */
border-top-right-radius: 4px!important;
/* margin-top: -@input-height-base; */
margin-top: -34px!important;
}
.select2-dropdown .select2-search {
padding: 0;
}
.select2-dropdown .select2-search .select2-search__field {
/* !important not needed using less */
border-top: 0!important;
border-left: 0!important;
border-right: 0!important;
border-radius: 0!important;
/* padding: @padding-base-vertical @padding-base-horizontal; */
padding: 6px 12px;
/* height: calc(@input-height-base - 1px); */
height: 33px;
}
.select2-dropdown.select2-dropdown--above {
/* border-bottom: 1px solid @input-border-focus; */
border-bottom: 1px solid #66afe9!important;
/* border-bottom-left-radius: @input-border-radius; */
border-bottom-left-radius: 4px!important;
/* border-bottom-right-radius: @input-border-radius; */
border-bottom-right-radius: 4px!important;
/* margin-top: @input-height-base; */
margin-top: 34px!important;
}
.select2-dropdown.select2-dropdown--above .select2-search .select2-search__field {
/* border-top: 1px solid @input-border; */
border-top: 1px solid #66afe9!important;
border-bottom: 0!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<div class="form-group">
<label class="control-label">Below example (click label to focus)</label>
<select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="1">
<option></option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
<option value="4">Fourth choice</option>
<option value="5">Fifth choice</option>
<option value="6">Sixth choice</option>
<option value="7">Seventh choice</option>
<option value="8">Eighth choice</option>
<option value="9">Ninth choice</option>
</select>
</div>
<div class="form-group above">
<label class="control-label">Above example (click label to focus)</label>
<select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="2">
<option></option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
<option value="4">Fourth choice</option>
<option value="5">Fifth choice</option>
<option value="6">Sixth choice</option>
<option value="7">Seventh choice</option>
<option value="8">Eighth choice</option>
<option value="9">Ninth choice</option>
</select>
</div>
Select2 的
minimumInputLength: 1
更新:代码清理,不要在焦点上打开下拉菜单。
使用这些属性
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
maximumSelectionSize: 1,
});
只需在下拉菜单的 onchange 事件上调用此函数
function ResentForMe(){
var _text=$('.select2-selection__rendered li:first-child').attr('title');
$('.select2-selection__rendered li:first-child').remove();
$('.select2-search__field').val(_text);
$('.select2-search__field').css('width','100%');
}
注意:从选择中删除“多个”属性
伙计们,在任何地方添加一些CSS:
.select2-dropdown--below {
margin-top: -33px !important;
border-radius: 4px !important;
}
试试吧! ;)
马特,)
这个作品
$('.search-town-flat').select2({ 多重:真实, 占位符:“输入值”, 允许清除:真, 最大选择长度:2, 主题:“经典” }).on('select2:select', 函数 (e) { $(this).val([]).trigger('更改'); $(this).val([e.params.data.id]).trigger("更改"); });
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/dropdown',
'select2/dropdown/attachBody',
'select2/dropdown/closeOnSelect',
'select2/compat/containerCss',
'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
var SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
CloseOnSelect
),
AttachBody
);
$('.inline-search').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: SelectionAdapter
});
$('.dropdown-search').select2({
selectionAdapter: MultipleSelection
});
$('.autocomplete').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
containerCssClass: 'select2-autocomplete'
});
});
.select2-selection__choice__remove {
display: none !important;
}
.select2-container--focus .select2-autocomplete .select2-selection__choice {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box</p>
<select style="width: 200px" class="inline-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the search box in the dropdown</p>
<select style="width: 200px" class="dropdown-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the selection hidden when it is focused</p>
<select style="width: 200px" class="autocomplete">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
我只是用 CSS 格式化了一个标准输入框,使其看起来像 Select2() 下拉列表:
input {
width: 100%;
padding: 7px 5px;
margin: 1px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/dropdown',
'select2/dropdown/attachBody',
'select2/dropdown/closeOnSelect',
'select2/compat/containerCss',
'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) {
var SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
CloseOnSelect
),
AttachBody
);
$('.inline-search').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: SelectionAdapter
});
$('.dropdown-search').select2({
selectionAdapter: MultipleSelection
});
$('.autocomplete').select2({
dropdownAdapter: DropdownAdapter,
selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss),
containerCssClass: 'select2-autocomplete'
});
});
.select2-selection__choice__remove {
display: none !important;
}
.select2-container--focus .select2-autocomplete .select2-selection__choice {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box</p>
<select style="width: 200px" class="inline-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the search box in the dropdown</p>
<select style="width: 200px" class="dropdown-search">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With the selection hidden when it is focused</p>
<select style="width: 200px" class="autocomplete">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>