我正在使用 jQuery Select2 插件来选择框。现在,我想为每个选项添加描述。当我打开选择框时,我看到以下文本:
One
Two
Three
Four
但是,我想看到类似的内容:
One
*Description for option One*
Two
*Description for option Two*
Three
*Description for option Three*
Four
*Description for option Four*
有人知道这是如何实现的吗?
这是我的完整脚本:
$.fn.select2.defaults = $.extend($.fn.select2.defaults,
{
allowClear: true,
closeOnSelect: true,
placeholder: 'Select...',
minimumResultsForSearch: 15
});
$(document).ready(function()
{
var configParamsObj = {
placeholder: '',
minimumResultsForSearch: 3
};
$("#vat").select2(configParamsObj);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="vat" name="vat">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
最佳答案
一种方法是在每个可用选项下面使用disabled
选项。更重要的是,您可以使用 select2
插件的 templateResult
选项自定义这些禁用选项的样式,如下例所示:
$.fn.select2.defaults = $.extend($.fn.select2.defaults,
{
allowClear: true,
closeOnSelect: true,
placeholder: 'Select...',
minimumResultsForSearch: 15
});
$(document).ready(function()
{
var configParamsObj = {
placeholder: '',
minimumResultsForSearch: 3,
templateResult: function(data, container)
{
// Read and propagate the class attribute of elements.
if (data.element)
$(container).addClass($(data.element).attr("class"));
return data.text;
}
};
$("#vat").select2(configParamsObj);
});
.opt-desc
{
font-size: 11px;
color: skyblue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="vat" name="vat" style="width:50%">
<option value="1">One</option>
<option class="opt-desc" disabled>Description of option One</option>
<option value="2">Two</option>
<option class="opt-desc" disabled>Description of option Two</option>
<option value="3">Three</option>
<option class="opt-desc" disabled>Description of option Three</option>
<option value="4">Four</option>
<option class="opt-desc" disabled>Description of option Four</option>
</select>
关于jquery - 选择2个带有描述的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54282320/