<select class="" id="js-select2" multiple="multiple">
<option>1</option>
<option>1</option>
</select>
$('#js-select2').select2({
placeholder: "Select your option",
allowClear: true
});
我使用它来创建带有选项的下拉菜单，选项显示正确，但选择允许用户键入和搜索。我希望它是一个简单的按钮，箭头向右对齐，单击后会显示我的所有选项。我该怎么做？
我尝试过使用样式并使用 select2-dropdown 但它似乎没有做任何事情。这似乎是一个简单的修复，但我显然有脑块
试试这个：-
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-select2').select2({
placeholder: "Select your option",
allowClear: true,
});
// Disable typing in the search box
$('.js-select2').on('select2:open', function (e) {
$('.select2-search__field').prop('disabled', true);
});
});
</script>
</head>
<body>
<select class="js-select2" name="state" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
请尝试此操作并在此处更新。
对于单选使用
minimumResultsForSearch = -1对于搜索字段上的多个选择集
disabled对于多选框，没有明显的搜索控件。因此，要禁用对多选框的搜索，您需要在打开或关闭下拉列表时将禁用属性设置为 true
$('#js-select2')
.select2({
placeholder: "Select your option",
allowClear: true
})
.on('select2:opening select2:closing', function(event) {
var $searchfield = $(this).parent().find('.select2-search__field');
$searchfield.prop('disabled', true);
});select {
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select id="js-select2" multiple="multiple">
<option>1</option>
<option>1</option>
</select>