bootstrap-select 在一个页面中的多个位置使用，但仅适用于第一个

Question

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

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 中使用不同的类选择器将解决您当前的问题

喜欢

$('.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 });