Bootstrap Selectpicker не работает в Blogger

Я добавляю гаджет HTML/Javascript и добавляю код:

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');
 });

Похоже, выпадающие списки отображаются с этим, но функциональность - нет. Я добавляю HTML и Javascript код в один и тот же гаджет. Я также попытался добавить код Javascript в раздел body/head HTML-кода, но:(

Источник

3 ответа

Решение

Используйте это, это будет работать. Ваша ошибка - попытка выбора с помощью элемента управления $(".selectpicker"). он выберет все элементы, у которых был выбор класса в формате массива. Чтобы решить эту проблему, поместите идентификатор на элемент управления, используя этот идентификатор, установите значение. ID будет уникальным

<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 будет таким.

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

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('#idSelect').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });
Источник

Я думаю, что так и должно быть. просто попробуйте ниже одного.

 $('.selectpicker').on('change', function () {
     var opValue = $('.selectpicker option:selected').val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });
Источник

Пожалуйста, убедитесь, что вы включили все необходимые файлы или вам может понадобиться изменить код следующим образом:

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

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

Вы должны сначала включить bootstrap-select.js, а затем вызвать функции плагина.

Надеюсь это поможет!

Источник
Другие вопросы по тегам