具有相同Javascript样式的两个引导程序选择形式

Question

我正在尝试获得两个使用相同JS的引导程序选择表单，但彼此不受影响（单击一个时，另一个不更改）。 它应该是两个颜色名称列表，它们以所有实例中描述的颜色出现（在列表中，单击前单击的第一个条目，单击一个后单击的条目）。 我有一个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

这可行。 还要确保id是唯一的。

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