how to set a select option value using jquery and select search lib?

Question

how to select an option value form select dropdown list using jquery? I am using a select option list with bootstrap plugin and select-search plugin but choosing is not a activated . . .

 $().ready(function(){ // To style only selects with the selectpicker class $('select').selectpicker(); $('#numbers').val(3); });

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!--***************select search plugin********--> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script> <select name="numbers" id="numbers"> <option>Why Not appears?</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select>

I would like to th

Answer 1

Your code works fine, but you are overriding it when you initialize the picker. Instead, set the value and then initialize the picker OR use the picker API to do so:

  $(document).ready(function(){
      $('select').selectpicker();
      $('#numbers').selectpicker('val', 3);
  });

 $(document).ready(function(){ $('select').selectpicker(); $('#numbers').selectpicker('val', 3); });

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!--***************select search plugin********--> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script> <select name="numbers" id="numbers"> <option>Why Not appears?</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select>

This happens because the interface to that component changes once you initialize it to a picker. If you'd like to use selectpicker API, you need to use .selectpicker('val', 3);

Read More

Answer 2

You have to refresh the selectpicker if you want to change the value after you created the selectpicker.

$('#numbers').selectpicker('val', 3);

But on page load, you only have to turn the order of your jquery.

$('#numbers').val(3);
$('select').selectpicker();

If you are trying to change multiple values on different selects, you can

1. call the selectpicker API ( $('#numbers').selectpicker('val', 3); ) multiple times

2. change all values with pure jquery and than refresh the selectpicker

   $('#first').val(3);
   $('#second').val(4); $('select').selectpicker('refresh');

Here is the source https://stackoverflow.com/a/14804479

Answer 3

There is no selectpicker() function in your code, so jquery is not executing further. I have commented on it and its working fine.

 $().ready(function(){ // To style only selects with the selectpicker class //$('select').selectpicker(); $('#numbers').val(3); });

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!--***************select search plugin********--> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script> <select name="numbers" id="numbers"> <option>Why Not appears?</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select>