Question

我有不同背景的下拉选项，如红色，蓝色和绿色。

我希望当有人选择绿色时，它会变成绿色，就像这样。我怎么能这样做？

以下是我的HTML代码：

<select name="mcolor" class="form-control" id="mcolor">
  <option value="">-- select color --</option>																				         <option value="#ff0000" style="background-color:#ff0000">&nbsp;</option>						
  <option value="#ffffff" style="background-color:#ffffff">&nbsp;</option>														</select>

Answer 1

这是如何更改选择的背景颜色：

$("#mcolor").change(function(){
    $('body').css("background-color", $(this).val());
});

<强> JSFiddle demo here

Answer 2

＆＃13;

function colourFunction() {
var myselect = document.getElementById("select1"),
colour = myselect.options[myselect.selectedIndex].className;
myselect.className = colour;
myselect.blur(); 
}

＆＃13;

#select1 {width:150px; color:rgba(0, 0, 0, 0);}
#select1:focus, #select1:focus {
color:black;
}
.white {background:white;}
.red {background:red;}
.yellow {background:yellow;}
.green {background:green}

＆＃13;

<select id="select1" onchange="colourFunction()">
<option class="white" value="A">This should have a WHITE background</option>
<option class="red" value="B">This should have a RED background</option>
<option class="yellow" value="C">This should have a YELLOW background</option>
<option class="green" value="D">This should have a GREEN background</option>
</select>

＆＃13;

Answer 3

试试这个

＆＃13;

    $('.form-control').on('change', function() {
      $(this).css('background-color', $(this).val());
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="mcolor" class="form-control" id="mcolor">
        <option value="red">-- red --</option>  
        <option value="green">-- green --</option>  
        <option value="black">-- black --</option>  
        </select>

＆＃13;

下拉背景作为选项显示选中

3 个答案: