两个具有相同Javascript样式的bootstrap-select表单

Question

我试图获得两个使用相同JS的bootstrap-select表单，但不会相互影响（单击一个时，另一个不会更改）。它应该是两个颜色名称列表，它们出现在所有实例中描述的颜色中（在列表中，单击之前看到的第一个条目，以及单击一个之后看到的条目）。我有一个JSFiddle示例，其中有一些方法。我希望保持我的示例中的悬停行为，当鼠标悬停在背景上时，文本颜色会保留，背景变得稍微灰白，不像文本变白并且背景变为蓝色的默认行为。我意识到我的两个表单都具有相同的“选择”ID并且需要不同，但是现在看它的顶部形式至少可以证明我想要的两种行为。

作为一个JSFiddle

HTML

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

JS

$(document).ready(function() {  
  $(".pickerSelectClass").selectpicker();   

  $("#select").selectpicker("refresh");
  $('.filter-option').css("color",$('#select').val());
   $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });
});

Answer 1

这有效。还要确保ids是独一无二的。

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
            $(this).parent().find('.filter-option').css("color",$(this).val());
      }).on('change', function(){
            $(this).parent().find('.filter-option').css("color",$(this).val());
      });
});