ドロップダウンで選択した値の変更時にデータバックグラウンドカラーを変更する方法

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' 
       }); 
      } 

     }); 

DATA-に。背景色の値は、ドロップダウンからどのオプションが選択されているかに基づいて変更されます。これに答える。

Answer 1

onchangeイベントはjQueryから利用できます。

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>