Bootstrap-select: Setting `val` doesn't work

[shaneparsons]

Using the following $('.selectpicker').selectpicker('val', '1'); to preset the value of my select is returning the following error.

Uncaught TypeError: e.stopPropagation is not a function

The error is pointing to line 258 in bootstrap-select.js if it helps.
i.e.

if (e) {
    e.stopPropagation();
    e.preventDefault();
}

[frutality]

Update: I see this error too. Tried to reproduce and couldn't! Then I checked bootstrap-select version at my server and at silviomoreto.github.io. Bug is there with version 1.6.3, but with version 1.6.5 all works fine. Check bootstrap-select version, @shaneparsons

[frutality]

I am sorry I hurry. I see very strange thing. If I do this
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
at my page, all works fine. There is no errors in browser console and $('.selectpicker').selectpicker('val', '1') works.

But If I save this file from CDN to my project directory and do this <script src="/media/libs/bootstrap-select.min.js"></script>
then I see error d.stopPropagation is not a function. And selectpicker('val') doesn't work.

[frutality]

Well.. I'm confused. In Firefox, if I open page first time: no errors. All works as expected. But if I refresh page, I see error.

In Chrome all works fine.

Problem is, I can't reproduce it on jsfiddle.

[frutality]

Finally I found what was the problem. It's not the browser and not the library error.
Problem was in appending options to <select></select>. If you are not refreshing selectpicker, then maybe you'll see the error. Or maybe not.

I've created fiddle: http://jsfiddle.net/nwd6gm6n/6/ but if you'll try to reproduce this situation, just copy source from fiddle to local html-file. Don't know why, but I can't get an error with jsfiddle.

[D-Skywalker]

Replace the conventional code:

 $target.selectpicker("val", value);

For this:

 $target.val(value);
 $target.selectpicker("refresh");

[goyatparmod]

I have same issue seems .val() not working for me as well.I am using ng-repeat in HTML and i tried following options nothing works. Appreciate any help.

$('#state-search').selectpicker('selectAll');
$state-search.selectpicker("val",$scope.states[0]);
$('#state-search').selectpicker("val",'Utah');
$('#state-search').selectpicker('refresh');

[maximelebreton]

+1

[caseyjhol]

See guidelines for contributing.

Bug reports

A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful - thank you!

Guidelines for bug reports:

1. Use the GitHub issue search. Check if the issue has already been reported.
2. Check if the issue has been fixed. Try to reproduce it using the latest master or development branch in the repository.
3. Provide environment details. Provide your operating system, browser(s), jQuery version, Bootstrap version, and bootstrap-select version.
4. Create an isolated and reproducible test case. Create a reduced test case.
5. Include a live example. Make use of jsFiddle or jsBin to share your isolated test cases.

[karthiksrinivasan]

I tried the following and it works.

 $target.selectpicker("refresh");
 $target.val(value);
 $target.selectpicker("refresh");

@D-Skywalker 's suggestion did not work for me, and I built on that to include additional refresh.

I believe there is some sort of delay induced by $target.selectpicker("refresh"); which is causing this issue.

[caseyjhol]

Can somebody _please_ provide an example of this feature not working? I would love to get this figured out.

[maximelebreton]

Same Uncaught TypeError: e.stopPropagation is not a function problem, and fixed with a 0 delay timer:

var val = $this.val();
setTimeout(function(){
  $this.selectpicker('val', val);
  if (val) {
    $this.trigger("change");
  }
 }, 0);

Dont have time to introspect, but I think this error came when the val function is called twice at the same time.
In my case, I use jquery-phoenix to save form state, and the bug came when I set the saved select state with val function on page initialisation.

[caseyjhol]

Instead of posting "+1", please provide an example. Here's a link to a bootstrap-select playground: http://silviomoreto.github.io/bootstrap-select/playground/.

[yokidara01]

same probleme tried all solutions above
` var agents = $(".selectpicker");
$(agents).each(function(key, val) {
if(arrayOfArrayOfvalues[key].length>1){
// $(val).selectpicker('val',arrayOfArrayOfvalues[key])
$(val).selectpicker("refresh");
$(val).val(arrayOfArrayOfvalues[key]);
$(val).selectpicker("refresh");
// $(val).selectpicker("refresh");
console.log("id of select :" + $(val).attr("id")+" values to put "+arrayOfArrayOfvalues[key])
}

                });`

[D-Skywalker]

@yokidara01 This code is realy confused, there are many things out from scope like arrayOfArrayOfvalues. I sugest you try use one of codes showed here in isolation before run your complete code.

[TheGP]

example:

$('select[name=event_id]').prepend($('<option>', {
    value: 2,
    text: 'name'
})).selectpicker('refresh').selectpicker('val', 2);

refresh works, select value updates, but it doesnt show it visually(the old value displayed)

[josyfg]

After weeks with the same error I change the bootstrap-select.js file in my local server and selectpicker works.
I found the new file in this link https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js