Only show country subset text in bootstrap formhelpers country picker

Question

I am using Bootstrap FormHelpers country picker and I have the following init code:

<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>

This code generate this output:

<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>

That's is fine, but I would get only the subset names like "Galego", "Catalá", "Euskara", and "Español", but avoiding the append of " (Spain)" (country name). So the bootstrap select only will show the subset locale country names.

Could be this implemented easily? The only thing that I think that could work and it is very ugly is access to the DOM and remove in each li role="option" the " (Spain)" text after load the page, but I am looking for some elegant way maybe initializing bootstrap options.

Answer 1

This is the only tricky way that I figure out using javascript, since I think that bootstrap component doesn't allow this feature with native implementation. Writing here the solution if helps in future to someone more:

<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>