1

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

Osahady
  • 439
  • 7
  • 16
  • 1
    Possible duplicate of [use jquery to select a dropdown option](https://stackoverflow.com/questions/4864620/use-jquery-to-select-a-dropdown-option) – Rich Oct 26 '18 at 18:05

3 Answers3

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

Rafael
  • 7,605
  • 13
  • 31
  • 46
  • This works perfectly fine on page load. However, if you ever want to change the value after the init, you need to call the refresh function – Patrick Schocke Oct 26 '18 at 18:22
  • 1
    Yeah, I updated my answer and showed how to update post load. – Rafael Oct 26 '18 at 18:23
  • You are calling the Val on the select element. This would change all selects. You need to call it on the #numbers – Patrick Schocke Oct 26 '18 at 18:31
  • That is *likely* true, but the OP initialized like this, so who am I to assume? – Rafael Oct 26 '18 at 18:33
  • The OP calls the init of selectpicker on all select and than try’s to change the value of #numbers. – Patrick Schocke Oct 26 '18 at 18:34
  • Again that may be true, but you are assuming he has more than one picker. – Rafael Oct 26 '18 at 18:36
  • That’s my personal opinion but I think that it would be better to give examples that work regardless of the code the OP has. If he copy and pastes your answer, he might be surprised, if he has more than one SP and all of them are changing. – Patrick Schocke Oct 26 '18 at 18:38
0

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

Patrick Schocke
  • 1,493
  • 2
  • 13
  • 25
  • There's no reason to use refresh. That method is *only to add / remove / disable options*. The OP should use `val` as stated in my answer. – Rafael Oct 26 '18 at 18:26
  • You did not, it should be `.selectpicker('val', 3);` – Rafael Oct 26 '18 at 18:28
  • I did. On pageload there is no reason to call it. – Patrick Schocke Oct 26 '18 at 18:33
  • refresh worked just fine for me due to that i have more than one drop down menu in my application with the same problem and using $('select').selectpicker('refresh'); //solved them all . . . thanks all of you – Osahady Oct 26 '18 at 19:13
  • You can call the `$('SELECTOR').selectpicker('val', VALUE);` every time you change a value. That's cleaner than refreshing since 2 lines > 1 line – Patrick Schocke Oct 26 '18 at 19:15
  • because when you first answered with refresh i was impressed a lot but when you changed the answer i was a little upset . . . any way many thanks – Osahady Oct 26 '18 at 19:25
  • I've edited and now it's back. However, the pure selectpicker solution looks a bit cleaner. Anyways, thanks for marking it back ;) – Patrick Schocke Oct 26 '18 at 19:26
0

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>
Santu Roy
  • 197
  • 7
  • 1
    He wants to keep the selectpicker. Why did you remove it? – Rafael Oct 26 '18 at 18:29
  • I didn't remove it, I commented on it just to show him that there is no existence of selectpicker() function in his code and hence it is stopping the next lines of script from executing. – Santu Roy Oct 26 '18 at 18:35
  • 2
    That is not correct. His code does have it from bootstrap-select lib. – Rafael Oct 26 '18 at 18:41