bootstrap button dropdown set selected value to li

Question

I am having a select box in my form, and after page loading, it is then transformed to bootstrap button before the select box. I can't set the selected value for the converted bootstrap button drop-down li .

<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="Occupation" title="-- Please select Occupation--">
<span class="filter-option pull-left">-- Please select Occupation--</span>&nbsp;<span class="bs-caret">
<span class="caret"></span></span></button>
<div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu">
<li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">-- Please select Occupation--</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Salaried</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Business</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Above 18 Years</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div>
<select name="Occupation" class="form-control show-tick" required="" tabindex="-98">
          <option value="">-- Please select Occupation--</option>
          <option value="Salaried">Salaried</option>
          <option value="Business">Business</option>
          <option value="Above 18">Above 18 Years</option>
</select>

I am having the value in localStorage.getItem('Occupation') , and I tried to set the value to that li by using

$('#Occupation ul li').eq(1).find('span').eq(1).text(localStorage.getItem('Occupation'));    //not worked
$('#Occupation').parents('.btn-group').find('.dropdown-toggle').html(localStorage.getItem('Occupation')+' <span class="caret"></span>');  //not worked
$("#Occupation li a").filter("[value=" + localStorage.getItem('Occupation') + "]"); //not worked
$("#Occupation").html(localStorage.getItem('Occupation') + '&nbsp;<span class="caret"></span>');  //not worked

Could someone suggest to me a solution to set the value to that drop-down?

Thanks :)

Answer 1

Upon checking, there is a plugin ( bootstrap-select ) installed in my site. That plugin modifies my select box to the bootstrap button.

Then I visited the plugin site and got a solution,

$('select[name="Occupation"]').selectpicker('val', localStorage.getItem('Occupation'));