LaraBell:
私が使用してブートストラップ4テーマを追加SELECT2ブートストラップのテーマを追加するSELECT2および必要に<span></span>
使用してテキストにformatState
する方法を。
私のHTMLコードは次のとおりです。
<div class="fieldset fieldset-1">
<label for="color">Choose color</label>
<select name="color" class="select2">
<option value="grn">Green</option>
<option value="blu">Blue</option>
<option value="brn">Brown</option>
<option value="blk">Black</option>
<option value="red">Red</option>
<option value="yel">Yellow</option>
<option value="wht">White</option>
</select>
</div>
そして、JS:
function formatState (state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/user/pages/images/flags";
var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
$(".select2").select2({
templateResult: formatState
});
$('select').select2({
theme: 'bootstrap4',
});
アクションSELECT2では表示されませ<span></span>
。私は私のJSコードをチェックして、この行(ブートストラップ4テーマ)を削除します。
$('select').select2({
theme: 'bootstrap4',
});
今SELECT2仕事と私は見ます<span></span>
。どのように私はこの問題を解決することができます!
Hemant:
JSで次の試してみてください
function formatState (state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/user/pages/images/flags";
var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() +
'.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
$(".select2").select2({
theme: 'bootstrap4',
templateResult: formatState
});