Question

我使用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

看看这个jsfiddle你会明白我的意思： http://jsfiddle.net/mqw9c88d/

Answer 1

有很多方法可以实现这一点，例如，一旦您更改了主要内容，您就可以更新其他select的颜色。选择：

function onSelectChange(){        
    $("#s_score").css('backgroundColor', this.style.backgroundColor);
    //other code...
}

查看部分工作JsFiddle（它仅更改第二个选择的颜色，因为第二个和第三个选择具有相同的ID）

在jquery更改多个下拉菜单的下拉列表中更改颜色

1 个答案: