我正在使用fontawesome,我想添加或删除所选项目的图标。所以我这样做了:http://jsbin.com/nasixuro/7/edit(感谢@Fares M.)
JS
$(document).ready(function () {
function format_select2_icon(opti) {
if (!opti.id) return opti.text; // optgroup
if ($(opti.element).data('icon') == "1") {
return opti.text + " <i class='fa fa-check'></i>";
} else {
return opti.text;
}
}
$("#sel").select2({
escapeMarkup: function(m) { return m; },
formatResult: format_select2_icon,
formatSelection: format_select2_icon
});
$("#addok").click(function() {
actual_value = $("#sel").find(':selected').text();
if (actual_value.indexOf(" <i class='fa fa-check'></i>") > -1){
alert("asd");
return;
}
newtext = actual_value + " <i class='fa fa-check'></i>";
$("#sel").find(':selected').text(newtext).change();
});
$("#removeok").click(function() {
actual_value= $("#sel").find(':selected').text();
indexOk=actual_value.indexOf(" <i class='fa fa-check'></i>");
if (indexOk > -1){
newtext =actual_value.substring(0, indexOk);
$("#sel").find(':selected').text(newtext).change();
return;
}
});
});
HTML
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2" data-icon="1">Friends</option>
<option value="3">Stackoverflow</option>
</select>
<br><br>
<button id="addok">Add <i class='fa fa-check'></i></button>
<button id="removeok">Remove <i class='fa fa-check'></i></button>
如您所见,您可以添加或删除Hello
和Stackoverflow
项目中的图标,但是在Friends
(这是使用formatSelection
和formatResult
格式化的选项)中,不会删除图标,如果您尝试添加图标,则会附加另一个图标一个到现有的。
你有什么想法解决这个问题吗?
我认为有两种方法可以实现这一目标:
$("#sel").select2({
escapeMarkup: function(m) {
return m;
}
});
这是一个有效的例子:http://jsbin.com/nasixuro/3/edit// single
updateSelection: function (data) {
var container=this.selection.find(".select2-chosen"), formatted, cssClass;
this.selection.data("select2-data", data);
container.empty();
if (data !== null) {
formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
}
if (formatted !== undefined) {
container.append(formatted);
}
cssClass=this.opts.formatSelectionCssClass(data, container);
if (cssClass !== undefined) {
container.addClass(cssClass);
}
this.selection.removeClass("select2-default");
if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
this.container.addClass("select2-allowclear");
}
},
删除这个:
if (data !== null) {
formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
}
并改变:
if (formatted !== undefined) {
container.append(formatted);
}
至:
if (data !== undefined) {
container.html(data.text);
}
在我看来,这是一个肮脏的解决方案。
对于Remove操作,请使用以下js代码:
$("#removeok").click(function() {
actual_value= $("#sel").find(':selected').text(),
indexOk =actual_value.indexOf(" <i class='fa fa-check'></i>");
if (indexOk > -1){
newtext =actual_value.substring(0, indexOk);
$("#sel").find(':selected').text(newtext).change();
return;
}
});
使用fontawesome图标,您可以使用以下内容:
.select2-results__option[aria-selected=true]::before {
content: "\f0c9";
font: normal normal normal 14px/1 FontAwesome;
color: rbg(255,0,0);
}
每个图标都有相同的文本:http://fortawesome.github.io/Font-Awesome/cheatsheet/
或者,如果您有gif,例如,它可以很好地将您的图像作为CSS背景,如下所示:
.select2-results__option[aria-selected=true] {
background: url('path/to/image.gif') no-repeat 10px 10px;
}
结果如下:
使用Bootstrap Glyphicons,您可以将以下内容添加到CSS中
.select2-results__option[aria-selected=true]::after {
font-family: "Glyphicons Halflings";
content: "\e013";
}
和glyphicon-ok
将附加到每个选定的项目。
在Bootstrap cheatsheet查找图标代码。
只需在选项中用<
替换<
并删除格式函数:
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2">Friends <i class='fa fa-check'></i></option>
<option value="3">Stackoverflow</option>
</select>
你可以在这里测试一下:http://jsbin.com/nasixuro/11/edit
Manbe你可以使用select2参数:formatResult或formatSelection,如下所示
$(document).ready(function () {
$("#sel").select2();
$("#addok").click(function() {
$("#sel").select2({
//formatResult: format
formatSelection: format
//escapeMarkup: function(m) { return m; }
});
});
});
function format(state) {
if (!state.id) return state.text;
return "<i class='fa fa-check'></i>" + state.text;
}
您无需手动执行DOM操作
var icon_checked = "<i class='fa fa-check'></i>";
function format(opt) {
var selection = this.element.select2("val");
if (opt.id === selection) {
return opt.text + icon_checked;
}
return opt.text;
}
$("#sel").select2({
formatResult: format
});
基本上this.element
会返回select
元素实例,您可以在其上运行.select2("val")
以获取所选值。
将其与对象的id进行比较,如果是true
,则给HTML带复选框,否则返回纯文本。我认为这是你想要实现的目标。
这是一个Working fiddle,我想这是你想要实现的目标
你不能在选项中添加标签。尝试将选项字体设置为font-family:“myfontawesome”,arial;并添加特殊字符而不是css替换。
我认为你的问题是你不能设置值或将html添加到下拉选项中的项目,就像你试图...它是纯文本。
newtext = actual_value + "wat";
See how your fiddle works when I remove the html and just add plaintext:
我也可能建议寻找here。
如果要显示图标,则需要定位HTML元素并插入HTML而不是TEXT。非常像这样:
$(document).ready(function () {
$("#sel").select2();
$("#addok").click(function() {
actual_value = $("#sel").find(':selected').text();
if (actual_value.indexOf(" <i class='fa fa-check'></i>") > -1){
alert("asd")
return
}
newtext = actual_value + "<i class='fa fa-check'></i>";
$("#s2id_sel").find('.select2-chosen').html(newtext);
});
});
但。从我所看到的,你需要定位的HTML元素是$('s2id _'+ [当前元素id])。 s2我猜SELECT2和id_。所以你的选择是id =“sel”,这意味着$('s2id_sel')
。另请注意,您需要找到选择的那个。它足够方便,有一个“.select2-selected”类,这使得它很容易定位。
这不会改变价值,只是LOOK,我认为你正在尝试做什么。
希望有所帮助
替换此代码
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2" data-icon="1">Friends</option>
<option value="3">Stackoverflow</option>
</select>
并把这段代码
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2">Friends</option>
<option value="3">Stackoverflow</option>
</select>
我更改了一些代码来检查您的数据图标
$("#addok").click(function() {
actual_value = $("#sel").find(':selected').text();
if($("#sel").find(':selected').data('icon') == '1')
{
alert("asd");
return}
设置data-icon = 0以防止它从format_select2_icon生成图标并删除图标。
if($("#sel").find(':selected').data('icon') == '1') {
$("#sel").find(':selected').data('icon','0') ;
$(".select2-chosen").text(actual_value).change();
}
见:http://jsbin.com/nasixuro/18/edit
希望对你有所帮助。