I am facing an issue with Bootstrap Select-box showing multiple times in a bootstrap modal wizard. I have tried various solutions from Stack Overflow but none of them seem to work. A screenshot of the problem can be seen below:
https://i.sstatic.net/glp3E.png
Here is the relevant part of my HTML/PHP code:
<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>
And here's the JavaScript code snippet:
$(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();
});
});