Изменить цвет в раскрывающемся меню, где JQuery изменить кратное раскрывающееся меню
Я использую jquery, чтобы изменить кратные выпадающие меню с одним выбором. И я использую одно раскрывающееся меню, чтобы сделать изменения для всех остальных.
Я добавил разные цвета фона для каждой опции. И когда я изменяю опцию в выпадающем меню, которая выделяет их все, этот фоновый цвет не будет отображаться в других выпадающих меню.
Как я могу достичь этого?
Вот JQuery
function addMessage(msg, clear){
if (clear !== null && clear) {
$('#msgs').html("");
}
$('#msgs').append(msg+"<br/>");
}
function onSelectChange(){
var stext = $("#s_make option:selected").val();
addMessage("you selected: " + stext);
switch (stext) {
case "opt_1":
$("#s_score > option[value='xml_multi_01.php']").attr('selected','selected');
break;
case "opt_2":
$("#s_score > option[value='xml_multi_02.php']").attr('selected','selected');
break;
case "opt_3":
$("#s_score > option[value='xml_multi_03.php']").attr('selected','selected');
break;
case "opt_4":
$("#s_score > option[value='xml_multi_04.php']").attr('selected','selected');
break;
}
}
function init(){
addMessage("init()<br/>");
$("#s_make").change(onSelectChange);
}
// keep this if using jQuery
$(document).ready(init);
И вот HTML
<select id='s_make' onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value='--' style="background: #ffffff;">Change all options to... </option>
<option value='opt_1' style="background: #bfe29c;">Option 1</option>
<option value='opt_2' style="background: #9cc474;">Option 2</option>
<option value='opt_3' style="background: #b6dafb;">Option 3</option>
<option value='opt_4' style="background: #6cace8;">Option 4</option>
</select>
Вариант 1Опция 2Опция 3Опция 4
Вариант 1Опция 2Опция 3Опция 4
Взгляните на этот jsfiddle, и вы, вероятно, поймете, что я имею в виду: http://jsfiddle.net/mqw9c88d/
1 ответ
Есть несколько способов добиться этого, например, вы можете обновить цвет других select
После того, как вы изменили свой основной выбор:
function onSelectChange(){
$("#s_score").css('backgroundColor', this.style.backgroundColor);
//other code...
}
См. Частично работающий JsFiddle (он меняет цвет только для 2-го выбора, потому что у вас одинаковый идентификатор для 2-го и 3-го выбора)