chosen select bootstrap shows twice in bootstrap modal

Question

Bootstrap Select-box shows multiple times in bootstrap modal wizard. how to fix that? the image is shown below:

i have tried many things from stack questions but no use.

My html/php part is below:

<div class="wizard" id="satellite-wizard" data-title="Create Server">
    <div class="wizard-card wizard-card-overlay" data-cardname="location">
        <div class="wizard-input-section">
        <select name="location" data-placeholder="Monitor nodes" style="width:350px;" class="chzn-select">
            <option value=""></option>
            <option>Atlanta</option>
            <option selected>Chicago</option>
            <option>Dallas</option>
        </select>
        </div>
    </div>
</div>

JS Code

    $(document).ready(function() {
        $.fn.wizard.logging = true;
        var wizard = $('#satellite-wizard').wizard({
            keyboard : false,
            contentHeight : 400,
            contentWidth : 700,
            backdrop: 'static'
        });

        $(".chzn-select").chosen();

        wizard.on('closed', function() {
            wizard.reset();
        });

        $('#open-wizard').click(function(e) {
            e.preventDefault();
            wizard.show();
        });
    });

That's a lot of JS code of which likely most is not relevant to the issue. Try removing parts of it successively, and see when/if the problem goes away, to narrow it down more. — CBroe, Nov 30 '16 at 20:14
Curious why you have a static width set to the chosen.js element? "style="width:350px;". Have you tried removing this and seeing if the doubling still happens? — Nathaniel Flick, Nov 30 '16 at 20:43
@NathanielFlick after removing this it goes completely wrong. — Fahad Almehaini, Nov 30 '16 at 20:52
Check this out: http://stackoverflow.com/questions/19089337/chosen-with-bootstrap-3-not-working-properly. Looks like you need to fire chosen after the modal is shown. — Nathaniel Flick, Nov 30 '16 at 21:14

score 0 · Answer 1 · answered Mar 03 '22 at 15:21

When Bootstrap Select gets applied it actually creates a copy of your select and hides the original. If you are seeing 2 of your selects it's because the hide process failed. The usual trick to resolve this is to add this line (usually in the done callback of the Ajax request that populates the select)

$('.selectpicker').selectpicker('refresh')

chosen select bootstrap shows twice in bootstrap modal

1 Answers1