Question

我在反应组件的一个页面中使用了三个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中使用不同的类选择器将解决您当前的问题

像

$('.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在一个页面中的多个位置使用，但仅适用于第一个

1 个答案: