Bootstrap Selectpicker 无法在 Blogger 上运行

Question

我正在添加 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 代码。我还尝试在 HTML 编码的 body/head 部分添加 Javascript 代码，但是 :(

Answer 1

我觉得应该是这样的。试试下面的一个。

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

Answer 2

请确保您包含了所有必需的文件，否则您可能需要重新排列代码，例如：

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

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

您需要先包含 bootstrap-select.js 然后调用插件函数。

希望对您有所帮助！

Answer 3

使用这个，它会起作用。你的错误是你试图 select 控制 $(".selectpicker").它将 select 数组格式中具有 class select 选择器的所有元素。要解决此问题，请将 ID 放在控件上，使用该 ID 设置值。 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');
 });

Bootstrap Selectpicker 无法在 Blogger 上运行

Bootstrap Selectpicker no working on Blogger

twitter-bootstrap

blogger

bootstrap-selectpicker