How to set the values for multiple bootstrap selectpicker?

Question

I am using this bootstrap select-picker. I have looked at this question and tried to set the values for the two select-pickers I have. However, It did not select the value for any select-picker. Anyone know how I could set the values for these two select-pickers individually?

I have two select pickers as below:

<div class="form-group col-md-6 col-lg-6 col-sm-6">
     <select id="firstPicker" name="selValue" class="form-control selectpicker">
          <option selected disabled value="default">Please Select</option>
          <option value="One">One</option>
          <option value="Two">Two</option>
      </select>
</div>

<div class="form-group col-md-6 col-lg-6 col-sm-6">
     <select id="secondPicker" name="selValue" class="form-control selectpicker">
          <option selected disabled value="default">Please Select</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
      </select>
</div>

I have tried to set the value for both by using below code that I got from the above linked question:

$('select[name=selValue]').val(One);
$(".selectpicker").selectpicker("refresh");

//not sure how I can set the value for the other one?
$('select[name=selValue]').val(Four);
$(".selectpicker").selectpicker("refresh");

Answer 1

Try this:

$('#firstPicker').selectpicker('val', 'One');
//$('#firstPicker').selectpicker('refresh')

$('#secondPicker').selectpicker('val', 'Four');
//$('#secondPicker').selectpicker('refresh')