bootstrap-select.js 怎么动态加载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap-select.js 怎么动态加载相关的知识,希望对你有一定的参考价值。

谁有这个的API文档或者说下这个怎么动态加载数据的。

参考技术A 请问怎么解决的 参考技术B 英文的可以吗?本回答被提问者采纳

Bootstrap-select on click 获取点击值

【中文标题】Bootstrap-select on click 获取点击值【英文标题】:Bootstrap-select on click get clicked value 【发布时间】:2016-08-24 23:41:48 【问题描述】:

我正在使用 jQuery 插件:bootstrap-select.js 我的 HTML 是 select(multiple) -> 选项。当用户选择或取消选择选项时,我想获取当前单击的选项值。

示例:用户选择项目 4 = console.log 项目 4。然后用户还选择项目 2 = console.log 项目 2。目前我得到项目 4,项目 2...它们总是在一个数组中,而不是单独的。

我的最终目标是根据用户选择的内容在页面上显示和隐藏 div。将有多个选择选项字段。

HTML 代码:

<fieldset class="dreamT">
   <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data- data-size="auto" multiple data-selected-text-format="count > 2">
    <optgroup>
        <option value="item 1">Item 1</option>
        <option value="item 2">Item 2</option>
        <option value="item 3">Item 3</option>
        <option value="item 4">Item 4</option>
        <option value="item 5">Item 5</option>
        <option disabled value="item 6">Item 6</option>
    </optgroup>
   </select>
</fieldset>

JS代码:

$("select#team").on("change", function(value)
   var This      = $(this);
   var selectedD = $(this).val();
   console.log(selectedD);
);

当前输出:["item 1", "item 3", "item 4", "item 5"]

插件站点:bootstrap-select

【问题讨论】:

你试过$("select#team").on("click", function(event, value)吗? @Osuwariboy 没有?你的意思是?我将如何实施? :D 【参考方案1】:

如bootstrap-select events 中所述,您可以使用 changed.bs.select 事件。

该事件在选择的值被更改后触发。它通过以下 4 个参数:

事件 点击索引 被选中 上一个值

$(function () 
  $('#team').selectpicker();
  $("#team").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) 
      if (clickedIndex == null && isSelected == null) 
          var selectedItems = ($(this).selectpicker('val') || []).length;
          var allItems = $(this).find('option:not([disabled])').length;
          if (selectedItems == allItems) 
              console.log('seleted all');
           else 
              console.log('deseleted all');
          
       else 
          var selectedD = $(this).find('option').eq(clickedIndex).text();
          console.log('selectedD: ' + selectedD +  ' oldValue: ' + oldValue);
      
  );
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>



<fieldset class="dreamT">
    <select name="team" id="team" multiple class="selectpicker show-menu-arrow show-tick form-control" title="" multiple data-actions-box="true"
            data- data-size="auto" multiple data-selected-text-format="count > 2">
        <optgroup>
            <option value="item 1">Item 1</option>
            <option value="item 2">Item 2</option>
            <option value="item 3">Item 3</option>
            <option value="item 4">Item 4</option>
            <option value="item 5">Item 5</option>
            <option disabled value="item 6">Item 6</option>
        </optgroup>
    </select>
</fieldset>

【讨论】:

它不适用于全选/取消全选选项 (data-actions-box="true") 然后 clickedIndex 和 newValue 和 null :( @PavelNovák 对不起,这是一个旧答案,插件已更新。片段已更新。【参考方案2】:

或者只是在选项元素上设置事件...

$("option").on("click", function(value)
        var This = $(this);
        var selectedD = $(this).val();
        console.log(selectedD);
);

https://jsfiddle.net/adjavaherian/ssqz4sh8/

【讨论】:

这不适用于插件。不知何故,它什么也没返回。我不知道为什么,但如果我使用 click 它什么也不做。 那是因为点击不会发生在选项上,它发生在代表它的跨度上【参考方案3】:

试试这个:

console.log(("#your-id option:selected").text());

参考:enter link description here

【讨论】:

【参考方案4】:

或者只是查找元素上的任何更改,如果更改则获取值。

$("#components").on("change", function(e) 
  var selected = document.querySelector("#components").selectedOptions[0].value
  alert(selected)
);

【讨论】:

以上是关于bootstrap-select.js 怎么动态加载的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap-select js jQuery控制select属性变化

Bootstrap-select on click 获取点击值

boostrap selectpicker 用法

怎么给视频加动态logo水印?

WPF控件动态添加 只是加了一个button 怎么显示不出来呢?窗口是空的

如何给视频添加动态字幕?要用啥软件?