具有相同Javascript样式的两个引导选择表单

我试图得到两个使用相同JS的引导选择表单，但不会相互影响（当一个被单击时，另一个不会改变）。它应该是两个颜色名称列表，它们以所有实例中描述的颜色显示（在列表中，单击前看到的第一个条目，单击后看到的条目）。我有一个JSFIDLE示例，这是其中的一部分。我想保留我在示例中的悬停行为，当鼠标悬停在上面时，文本颜色会保留下来，背景只会稍微变灰，这与默认行为不同，默认行为是文本变白，背景变蓝。我意识到我的两种形式都有相同的“选择”ID，需要有所不同，但从现在的最高形式来看，至少可以展示我想要的两种行为

作为一个

HTML

---

这很有效。还要确保

id

s是唯一的

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

---

您添加了Jquery库了吗？还要检查开发人员工具中的控制台，确保没有错误。尝试添加唯一的idsYes，在JSF中，外部资源中有JQuery。我曾尝试添加唯一ID并引用类名，但现在这两种形式都不起作用。

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

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

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