bootstrap-select问题，动态传入option

Posted 2023-04-30

html代码：

js代码：

option一个都不显示，不是ajax的错误，就是不会bootstrap-select的使用，求指导
http://bbs.csdn.net/topics/390986048这个网址跟我是相同的问题，但是不知道怎么用他的方法

参考技术A 用$()包住你的option，因为你append的是一个jquery对象；追问

具体怎么做，我发代码$("#stationEnvProjects").append(""+data[i].name+"");

追答

$("#stationEnvProjects").append($(""+data[i].name+""));

这样你试试~

追问

我那个能取到数据，用了bootstrap-select就取不到了

追答

sorry，没用过bookstrap-select.爱莫能助了，祝你好运~

本回答被提问者采纳 参考技术B 明显append里面字符窜拼接的不对

1.首先value='"+data[i]+"'>"
2. 循环里面的要放在for外层
3. var str="";
for( var i=0;i<data.userList(后台返回的list）.length;i++)

str=str+"<option value='"+data.userList[i]+"'>"+data.userList[i].name+"</option>"

$("").apend(str);追问

你这样跟我那样效果一样，无非是一个一个追加和一起追加的区别，我的ajax没错，能取到数据

追答

起码你这个是错的！value='"+data[i]+"'>"
你那样追加会把之前的数据刷掉谢谢！不懂自己再多看看。或者查相关资料！最好自己试试！我的代码亲测没问题

追问

晕了，我都取到数据了，你说我是错的。。。

Bootstrap-select - 如何在更改时触发事件

【中文标题】Bootstrap-select - 如何在更改时触发事件

【英文标题】：Bootstrap-select - how to fire event on change

【发布时间】：2014-11-01 11:30:36

【问题描述】：

我正在使用 Bootstrap 3.0.2 和 Bootstrap-select 插件。

这是我的选择列表：

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Kovář</option>
  <option>Hana Skalická</option>
  <option>Simona Kolářová</option>
  <option>Kateřina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

这是我的 JavaScript：

//inicialization of select picker
$('.selectpicker').selectpicker();

//on change function i need to control selected value
$('select.selectpicker').on('change', function()
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
);

问题

我的问题是更改功能不起作用。它什么也没做，我自己也找不到解决办法。

如果我将它放入准备好的文档中而不是更改功能，它似乎正在工作。所以我想我在某处有错误：

$('select.selectpicker').on('change', function()

我也试过只用：

$('.selectpicker').on('change', function()

没有这个选择前缀，但没有任何变化。

更新

解决方案是将 jquery 代码放入 document.ready()。感谢Kartikeya

【问题讨论】：

为什么你不把 jquery 代码放在 document.ready()..??​​?

【参考方案1】：

当 Bootstrap Select 初始化时，它将构建一组自定义 div，与原始 <select> 元素一起运行，并且通常会在两种输入机制之间同步状态。

也就是说，在引导选择上处理事件的一种方法是监听它修改的原始选择上的事件，而不管是谁更新了它。

解决方案 1 - 原生事件

只需侦听change event 并获取所选值using javascript 或jQuery，如下所示：

$('select').on('change', function(e)
  console.log(this.value,
              this.options[this.selectedIndex].value,
              $(this).find("option:selected").val(),);
);

^{*注意：与任何依赖 DOM 的脚本一样，请确保在执行前等待 DOM ready event}

堆栈片段中的演示：

$(function() 

  $('select').on('change', function(e)
    console.log(this.value,
                this.options[this.selectedIndex].value,
                $(this).find("option:selected").val(),);
  );
  
);

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

解决方案 2 - 引导选择自定义事件

作为this answer alludes，Bootstrap Select 有自己的一组custom events，包括changed.bs.select，其中：

在选择的值改变后触发。它通过事件，clickedIndex，newValue，oldValue。

你可以像这样使用它：

$("select").on("changed.bs.select", 
      function(e, clickedIndex, newValue, oldValue) 
    console.log(this.value, clickedIndex, newValue, oldValue)
);

堆栈片段中的演示：

$(function() 

  $("select").on("changed.bs.select", 
        function(e, clickedIndex, newValue, oldValue) 
      console.log(this.value, clickedIndex, newValue, oldValue)
  );

);

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

【讨论】：

另一种解决方案这没有得到最后一个un-selected选项的值，所以试试这个answer

@stom，好点子，我已经从那个答案中内联了位，并确定了两者之间的区别

请编辑以将选项标签中的val= 更改为value=。

【参考方案2】：

这就是我所做的。

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) 
    var selected = $(e.currentTarget).val();
);

【讨论】：

另一个解决方案这没有得到最后一个un-selected选项的值，所以试试这个answer

【参考方案3】：

最简单的解决方案是 -

$('.selectpicker').trigger('change');

【参考方案4】：

$("#Id").change(function()
    var selected = $('#Id option:selected').val();
    alert(selected);           
);

我想这就是你需要的。

【讨论】：

多选如何获取所有值？

【参考方案5】：

最简单的实现。

<script>
    $( ".selectpicker" ).change(function() 
        alert( "Handler for .change() called." );
    );
</script>

【参考方案6】：

我的实现

import $ from 'jquery';

$(document).ready(() => 
  $('#whatDescribesYouSelectInput').on('change', (e) => 
    if (e.target.value === 'Other') 
      $('#whatDescribesYouOtherInput').attr('type', 'text');
      $('#specifyLabel').show();
     else 
      $('#whatDescribesYouOtherInput').attr('type', 'hidden');
      $('#specifyLabel').hide();
    
  );
);