如何在更改下拉列表中選擇的值時更改數據背景顏色

Question

我想在更改下拉列表中的選項時更改標題的顏色。如果選擇了選項1，背景顏色將變爲綠色。

HTML：

<div class="card-header" data-background-color="blue" style="position: relative; padding:25px;"> 
    <h4 class="title" style="font-family: 'Josefin Sans', sans-serif;"> 
    <b>Heading</b> 
    </h4> 
</div> 
<div class="col-md-3 col-sm-3 col-xs-6"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
     <i class="material-icons">account_balance</i> 
     </span> 
     <select type="text" class="form-control validate" id="optionSelect"> 
     <option value="-1">Select Shift</option> 
     <option style="border-left-color:#2ecc71;" value=1>DAY</option> 
     <option style="border-left-color:#3498db;" value=2>NIGHT</option> 
     <option style="border-left-color:#f1c40f;" value=3>AFTERNOON</option> 
     </select> 
    </div> 
    </div> 
</div> 

jQuery的

$（ '＃optionselect'）上（ '變'，函數（）{

  var shift = $('#optionselect').val(); 
      if (shift === 'DAY') { 
       $('#ftagHeader').css({ 
        'background-color': 'green !important' 
       }); 
      } 

     }); 

數據 - 。背景顏色值將根據從下拉列表中選擇哪個選項而改變。如果您知道我們該如何做到這一點..plz讓我知道回答這個問題。

Answer 1

您可以使用中的onchange事件如下。

var colors = { 
 
    1: "blue", 
 
    2: "brown", 
 
    3: "red" 
 
} 
 

 

 
$("#optionSelect").on("change", function(event) { 
 

 
    console.log("Select value: ", event.target.value); 
 
    $(".card-header:eq(0)").attr("data-background-color", colors[event.target.value]); 
 
    $(".card-header:eq(0)").css("background-color", colors[event.target.value]); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card-header" data-background-color="blue" style="position: relative; padding:25px;"> 
 
    <h4 class="title" style="font-family: 'Josefin Sans', sans-serif;"> 
 
    <b>Heading</b></h4> 
 
</div> 
 

 
<div class="col-md-3 col-sm-3 col-xs-6"> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
     <i class="material-icons">account_balance</i> 
 
     </span> 
 
     <select type="text" class="form-control validate" id="optionSelect"> 
 
     <option value="-1">Select Shift</option> 
 
     <option style="border-left-color:#2ecc71;" value=1>DAY</option> 
 
     <option style="border-left-color:#3498db;" value=2>NIGHT</option> 
 
     <option style="border-left-color:#f1c40f;" value=3>AFTERNOON</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

var select = document.querySelector('#optionSelect'); 
 
var divEle = document.querySelector('.card-header'); 
 
select.addEventListener('change', onSelectChange) 
 

 
function onSelectChange(e) { 
 
    e = e || window.event; 
 
    var target = e.target || e.srcElement; 
 
    var value = target.value; 
 
    var color = divEle.getAttribute('data-background-color'); 
 
    
 
    if (value == '1') { 
 
    color = 'green'; 
 
    } 
 
    
 
    divEle.setAttribute('data-background-color', color); 
 
    console.log(divEle.getAttribute('data-background-color')); 
 
}

<div class="card-header" data-background-color="blue" style="position: relative; padding:25px;"> 
 
<h4 class="title" style="font-family: 'Josefin Sans', sans-serif;"> 
 
<b>Heading</b></h4> 
 
</div> 
 

 

 
<div class="col-md-3 col-sm-3 col-xs-6"> 
 
    <div class="form-group"> 
 
     <div class="input-group"> 
 
<span class="input-group-addon"> 
 
<i class="material-icons">account_balance</i> 
 
</span> 
 
<select type="text" class="form-control validate" id="optionSelect"> 
 
    <option value="-1">Select Shift</option> 
 
    <option style="border-left-color:#2ecc71;" value="1">DAY</option> 
 
    <option style="border-left-color:#3498db;" value="2">NIGHT</option> 
 
    <option style="border-left-color:#f1c40f;" value="3">AFTERNOON</option> 
 
</select> 
 
</div> 
 
</div> 
 
</div>

Answer 3

$('#optionSelect').on('change', function() { 
 
    switch ($(this).val()) { 
 
    case '1': 
 
     $('.card-header').attr('data-background-color', 'day'); 
 
     break; 
 
    case '2': 
 
     $('.card-header').attr('data-background-color', 'night'); 
 
     break; 
 
    case '3': 
 
     $('.card-header').attr('data-background-color', 'afternoon'); 
 
     break; 
 
    } 
 
});

[data-background-color='blue'] { 
 
    background-color: blue; 
 
    color: #FFF; 
 
} 
 

 
[data-background-color='day'] { 
 
    background-color: yellow; 
 
    color: #000; 
 
} 
 

 
[data-background-color='night'] { 
 
    background-color: #000; 
 
    color: #FFF; 
 
} 
 

 
[data-background-color='afternoon'] { 
 
    background-color: orange; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="card-header" data-background-color="blue" style="position: relative; padding:25px;"> 
 
    <h4 class="title" style="font-family: 'Josefin Sans', sans-serif;"> 
 
    <b>Heading</b></h4> 
 
</div> 
 

 
<div class="col-md-3 col-sm-3 col-xs-6"> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
     <i class="material-icons">account_balance</i> 
 
     </span> 
 
     <select type="text" class="form-control validate" id="optionSelect"> 
 
     <option value="-1">Select Shift</option> 
 
     <option style="border-left-color:#2ecc71;" value=1>DAY</option> 
 
     <option style="border-left-color:#3498db;" value=2>NIGHT</option> 
 
     <option style="border-left-color:#f1c40f;" value=3>AFTERNOON</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>