JSF tag interpreting into html

Question

I have code like this :

<h:selectOneRadio id="client_type"
                  value="#{customer.participant}">
    <f:selectItem itemValue="true" itemLabel="Type1" />
    <f:selectItem itemValue="false" itemLabel="Type2"/>
    <a4j:ajax render="... country_nr3 ..." execute="@this"
        listener="#{customer.changeType}"/>
</h:selectOneRadio>
...
<h:panelGroup id="country_nr3">

            <h:outputLabel styleClass="label">Country</h:outputLabel>
            <h:selectOneMenu value="#{customer.countryId}">
                <f:selectItems value="#{customer.countries}"/>
            </h:selectOneMenu>

</h:panelGroup>

panelGroup with id="country_nr3" re-rendered when changes selectOneRadio id="client_type" html after change is:

<span id="issue:country_nr3">
    <div class="row full_width_select col-xs-12 col-md-6">
        <label class="label">Country</label>
        <select name="issue:j_idt279" size="1"> <option value="1">Country 1</option>
            <option value="2">Country 2</option>
            <option value="3">Country 3</option>
        </select>
    </div>
</span>

html after F5(refresh page) is:

<span id="issue:country_nr3">
    <div class="row full_width_select col-xs-12 col-md-6">
        <label class="label">Country</label>
        <select name="issue:j_idt279" size="1" class="hasChosen">
            <option value="1">Country 1</option>
            <option value="2">Country 2</option>
            <option value="3">Country 3</option>
        </select>
        <div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 95%;" title="">
        <a class="chosen-single" tabindex="-1">
            <span>Country 1</span>
            <div>
                <b></b>
            </div></a>
            <div class="chosen-drop">
                <div class="chosen-search">
                    <input type="text" autocomplete="off" disabled="" readonly="">
                </div>
                    <ul class="chosen-results">
                    <li class="active-result result-selected" data-option-array-index="0" style="">Country 1</li>
                    <li class="active-result" data-option-array-index="1" style="">Country 2</li>
                    <li class="active-result" data-option-array-index="2" style="">Country 3</li>
                    </ul>
            </div>
        </div>
    </div>
</span>

Since tags are added to the html, the result looks completely different. What and at what point does it add code to html? how to manage this process, why is this happening? In which direction to look for the answer?