bootstrap-select 在一个页面的多个地方使用，但只对第一个有效

Question

我在我的 React 组件的一个页面中使用了三个 bootstrap-select (https://silviomoreto.github.io/bootstrap-select/)，我已经按照给出的所有说明进行操作，但只有第一个有效正确而其他的根本没有显示，这是代码片段：

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

<div className="custom-select">
  <p className="font-300"> Drill Down Select </p>
  <select className="sidebar-select m-bot-1 selectpicker selectbg" onChange = {this.handleGraphTypeSelect.bind(this)}>
    <option selected disabled="disabled">Drill Downs</option>
    <option value="2_AXIS">Two axis graph</option>
    <option value="MULTIPLE_AXIS">Multiple axis</option>
    <option value="LOCATION">Location</option>
  </select>
</div>

其他两个具有相同的类和结构，但值不同

Answer 1

在 JQuery 中使用不同的 class 选择器将解决您当前的问题

喜欢

$('.select').selectpicker(); $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 });
$('.select1').selectpicker(); $('.selectpicker1').selectpicker({ style: 'btn-info', size: 4 });
$('.select2').selectpicker(); $('.selectpicker2').selectpicker({ style: 'btn-info', size: 4 });

bootstrap-select 在一个页面的多个地方使用，但只对第一个有效

bootstrap-select is used in multiple places in one page but only working for the first one

twitter-bootstrap

reactjs

select

bootstrap-select