Изменить цвет в раскрывающемся меню, где 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-го выбора)

Другие вопросы по тегам