Bootstrap Selectpicker 在 Blogger 上不起作用答案

【问题标题】：Bootstrap Selectpicker no working on BloggerBootstrap Selectpicker 在 Blogger 上不起作用
【发布时间】：2016-08-30 07:22:13
【问题描述】：

我正在添加 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 编码的主体/头部部分添加 Javascript 代码，但是 :(

【问题讨论】：

标签： twitter-bootstrap blogger bootstrap-selectpicker

【解决方案1】：

使用它，它会起作用。您的错误是您尝试使用控件 $(".selectpicker") 进行选择。它将选择数组格式中具有类 selectpicker 的所有元素。要解决此问题，请将 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');
 });

【讨论】：

抱歉，如果我的要求太高了，但添加这个阻止了我最近的帖子小部件

【解决方案2】：

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

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

【讨论】：

我尝试创建一个新博客并且它成功了..不确定为什么它在另一个博客上不起作用。可能有些脚本有冲突
cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/…' media='screen' rel='stylesheet' type='text/css'/>
您是否认为是因为第二个框中的脚本导致链接失效？
@user1000730 你能详细说明你想要达到的目标吗

【解决方案3】：

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

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

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

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

希望这会有所帮助！

【讨论】：

不，不工作。这些是我在 head 部分添加的必需文件