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

Question

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

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

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

Two bootstrap-select forms with the same Javascript styling

html

javascript

css

twitter-bootstrap

bootstrap-select