如何更改下拉列表中所选值的更改时的数据 - 背景颜色

Question

我想在更改drop-down中的选项时更改标题的颜色。如果选择了选项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'）。on（'change'，function（）{

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

        });

数据背景颜色值将根据从下拉列表中选择的选项而更改。如果你知道我们怎么能这样做......请通过回答这个来告诉我。

Answer 1

您可以使用onchange中的jQuery事件，如下所示。

＆＃13;

＆＃13;

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]);

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

[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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;