Bootstrap Select dynamic

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<form id="condimentForm" method="get" action="">
    <label for="condiment">Pick one! <span class="text-error">*</span></label>
<select name="condiment" class="selectpicker required" >
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
    <p>
    <button type="submit" class="btn">Submit and Validate</button>
     <p>
</form>

JavaScript

$('.selectpicker').selectpicker();

for (var i = 0; i < 4; i++) {
    var o = new Option("option text"+i, "value"+i);
    /// jquerify the DOM object 'o' so we can use the html method
    $(o).html("option text"+i);
    $(".selectpicker").append(o);
}

$(".selectpicker").append("val","OK");
$(".selectpicker").selectpicker('refresh');