我正在使用Bootstrap FormHelpers country picker,我有以下初始化代码:
<div class="bfh-selectbox bfh-languages pull-right" data-language="es_ES" data-available="gl_ES,ca_ES,eu_ES,es_ES" data-flags="false" data-blank="false"></div>
此代码生成此输出:
<div class="bfh-selectbox bfh-languages pull-right" data-language="es_es" data-available="gl_ES,ca_ES,eu_ES,es_ES" data-flags="false" data-blank="false">
<input type="hidden" name="" value="es_es">
<a class="bfh-selectbox-toggle form-control" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option">Galego (Spain)</span>
<span class="caret selectbox-caret"></span></a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a tabindex="-1" href="#" data-option="gl_ES">Galego (Spain)</a>
</li>
<li><a tabindex="-1" href="#" data-option="ca_ES">Català (Spain)</a></li>
<li><a tabindex="-1" href="#" data-option="eu_ES">Euskara (Spain)</a></li>
<li><a tabindex="-1" href="#" data-option="es_ES">Español (Spain)</a></li>
</ul>
</div>
</div>
这很好,但我只会得到像“Galego”,“Catalá”,“Euskara”和“Español”这样的子集名称,但是避免添加“(西班牙)”(国名)。因此,bootstrap select仅显示子集区域设置国家/地区名称。
可以轻松实现吗?我认为唯一可以工作且非常难看的是访问DOM并在每个li role =“选项”中删除加载页面后的“(西班牙)”文本,但我正在寻找一些优雅的方式也许初始化bootstrap选项。
答案 0 :(得分:3)
如果您使用data-language="es"
而不是 es_ES
<div class="bfh-selectbox bfh-languages pull-right" data-language="es" data-available="gl_ES,ca_ES,eu_ES,es_ES" data-flags="false" data-blank="false"></div>
的文档
答案 1 :(得分:1)
这是我弄清楚使用javascript的唯一棘手方法,因为我认为bootstrap组件不允许本机实现此功能。在这里写一个解决方案,如果将来有人帮助更多:
<script>
$( document ).ready(function()
{
$('.bfh-selectbox-options li a').each(function(key, value) {
//console.log($(this).text().replace(' (Spain)',''))
$(this).text($(this).text().replace(' (Spain)',''))
});
$('.bfh-selectbox-option').text($('.bfh-selectbox-option').text().replace(' (Spain)',''))
});
</script>