I'm trying to get two bootstrap-select forms that use the same JS, but don't affect each other (when one is clicked, the other doesn't change). It should be two lists of names of colours, with them appearing in the colours described in all instances (in the list, the first entry seen before clicked, and the entry seen after one is clicked). I have a JSFiddle example which is some of the way there. I want to keep the hover behaviour I have in my example, where the text colour is retained when the mouse hovers over and the background becomes only slightly greyer, unlike the default behaviour where the text goes white and the background goes blue. I realise both of my forms have the same ID of "select" and need to be different, but looking at the top form the way it is now can at least demonstrate the kind of behaviour that I want for both.
As a 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());
});
});
This works. Also make sure that the id
s are unique.
$(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());
});
});