在選擇元素中更改選項的顏色

我試圖改變選擇元素中選定元素的顏色，同時它在下拉菜單中並且顯示在主窗口中。到目前爲止，我已經能夠改變所有選項的顏色。在選擇元素中更改選項的顏色

 <select id="drop-down" onchange="colorChange(event);"> 
      <option value="">--</option> 
      <option value="one">one</option> 
      <option value="two">two</option> 
      <option value="three">three</option> 
      <option value="four">four</option> 
     </select>

這是我正在使用的功能。

 var one = "one"; 
     var two = "two"; 
     var three = "three"; 
     var four = "four"; 

     function colorChange(event){ 
      if(event.target.value == one){ 
      event.target.style.color = "#67D986"; 
      } else if (event.target.value == two || three || four){ 
      event.target.style.color = "#f00"; 
      } else{ 
      alert("There has been an error!!!"); 
     } 

    };

來源

2015-08-21 verygreen

有問題，你else if在OR條件，在OR使用添加條件下

} else if (event.target.value == two || event.target.value == three || event.target.value == four) {

var colors = { 
 
    one: '#67D986', 
 
    two: '#f00', 
 
    three: '#f00', 
 
    four: '#f00' 
 
}; 
 

 
$('#drop-down').on('change', function(e) { 
 
    var value = $('option:selected').val(); 
 
    $('option').css('color', '#000'); 
 

 
    if (!value) { 
 
    alert("There has been an error!!!"); 
 
    } else { 
 
    $('option:selected').css('color', colors[value]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<select id="drop-down"> 
 
    <option value="">--</option> 
 
    <option value="one">one</option> 
 
    <option value="two">two</option> 
 
    <option value="three">three</option> 
 
    <option value="four">four</option> 
 
</select>

來源

2015-08-21 11:32:54 Tushar

我不不瘦k我正確地回答了我的問題。我只想要選擇改變顏色的選項。當你點擊胡蘿蔔再次看到所有的選項時，他們現在是綠色/紅色。 – verygreen

@verygreen檢查更新的答案 – Tushar

有什麼方法可以使主窗口中顯示顏色？它仍然是黑色的。 – verygreen

做在jQuery的方式，如果你喜歡：

$(document).ready(function(){ 
    $("#drop-down").on("change",function(){ 
     var selectedVal = $(this).val(); 
     switch(selectedVal) 
     { 
      case "one": $(this).css("color","red") 
      break; 
      case "two": $(this).css("color","blue"); 
      break; 
     } 
    }); 
});

的Html

<select id="drop-down" > 
     <option value="">--</option> 
     <option value="one">one</option> 
     <option value="two">two</option> 
     <option value="three">three</option> 
     <option value="four">four</option> 
</select>

來源

2015-08-21 11:42:25

您好我想你甚至可以通過CSS只有在這裏做到這一點我是退房

select{ 
 
    margin:40px; 
 
    color:#fff; 
 
    text-shadow:0 1px 0 rgba(0,0,0,0.4); 
 
} 
 
select option { 
 
    margin:40px; 
 
    background: rgba(0,0,0,0.3); 
 
    color:#fff; 
 
    text-shadow:0 1px 0 rgba(0,0,0,0.4); 
 
} 
 

 
select option[val="one"]{ 
 
    background: #67D986; 
 
} 
 

 
select option[val="two"],select option[val="three"],select option[val="four"]{ 
 
    background: #f00; 
 
}

<select id="drop-down"> 
 
    <option val="">-----------------</option> 
 
    <option val="one">One</option> 
 
    <option val="two">Two</option> 
 
    <option val="three">Three</option> 
 
    <option val="four">Four</option> 
 
</select>

Check By only CSS

來源

2015-08-21 12:34:15

在選擇元素中更改選項的顏色

回答

相關問題