Bootstrap Selectpicker no working on Blogger

Question

I am adding the HTML/Javascript Gadget and adding the code:

HTML

<strong>OPTION 1</strong>

<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />
<strong>OPTION 2</strong>

<select class="selectpicker" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

Javascript

$('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

Dropdowns seem to be getting displayed with this but the functionality is not. I am adding both HTML and Javascript code in the same gadget. I also tried adding the Javascript code in the body/head section of the HTML Coding, but :(

score 0 · Answer 1 · answered Aug 30 '16 at 07:28

0

I think it should be like this. just try below one.

 $('.selectpicker').on('change', function () {
     var opValue = $('.selectpicker option:selected').val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

answered Aug 30 '16 at 07:28

kernal_lora

1,115
3
12
25

i tried creating a new blog and it worked..not sure why it is not working on the other one. May be some scripts are conflicting – user1000730 Aug 30 '16 at 09:02
– user1000730 Aug 30 '16 at 09:03
– user1000730 Aug 30 '16 at 09:03
Do you think because of the scripts in the second box the links are not working? – user1000730 Aug 30 '16 at 09:04
@user1000730 can you please elaborate in the question what exactly your trying to acheive – kernal_lora Aug 30 '16 at 09:11
I am just trying to add bootstrap styling to two nested dropdowns – user1000730 Aug 30 '16 at 09:18

score 0 · Answer 2 · answered Aug 30 '16 at 07:29

0

Please be sure that you included all the required files or You may have to rearrange the code like :

<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>

<script type="text/javascript">
    $('.selectpicker').selectpicker({
      });
</script>

You need to include the bootstrap-select.js first then call the the plugin functions.

Hope This Helps!

answered Aug 30 '16 at 07:29

Jazib Bashir

493
5
19

Nope not working. these are the required files i have added in the head section – user1000730 Aug 30 '16 at 08:39
– user1000730 Aug 30 '16 at 08:40

score 0 · Accepted Answer · answered Aug 30 '16 at 09:02

Use this, it will works. your mistake is your trying to select with control $(".selectpicker"). it will select the all elements which had class selectpicker in the array format. TO fix this issue put ID on the control, using that id set the value. ID will be unique

<strong>OPTION 1</strong>

<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />
<strong>OPTION 2</strong>

<select class="selectpicker" id="idSelect" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

JS will be like this.

 $('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('#idSelect').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

Apologies if am sounding too demanding, but adding this stopped my recent posts widget — user1000730, Aug 30 '16 at 12:42

Bootstrap Selectpicker no working on Blogger

3 Answers3