jquery - Action depend select option value selected？

Question

我需要根据选择框的选定值更改选择框及其行的颜色。就像我试过的那样，每个组合都有 3 个选择框和 3 个选项。 如何更改每个选择框上选中的每个选项的颜色？

.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary" selected>Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary" selected>Secondary</option>
      <option value="optional">Optional</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col">
    <select id="impSelect">
      <option value="primary">Primary</option>
      <option value="secondary">Secondary</option>
      <option value="optional" selected>Optional</option>
    </select>
  </div>
</div>

其实我想要这样的结果？ 关于我将管理的自定义选择框。这一切都是关于为不同的颜色添加特定的类。

Answer 1

您可以在 select 上使用 javascript (jQuery's) change 事件实现此目的，并使用 closest() 进行父级选择，例如:

$('select').on('change', function() {
  var value = $(this).find(':selected').text();
  if(value == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if(value == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});

看看下面的工作片段:

$('select').each(function() {
  var text = $(this).find(':selected').text();
  if(text == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if (text == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});

$('body').on('change', 'select', function() {
  var value = $(this).find(':selected').text();
  if(value == 'Primary') {
    $(this).parent().closest('.row').addClass('primary');
    $(this).parent().closest('.row').removeClass('secondary optional');
  } else if(value == 'Secondary') {
    $(this).parent().closest('.row').addClass('secondary');
    $(this).parent().closest('.row').removeClass('primary optional');
  } else {
    $(this).parent().closest('.row').addClass('optional');
    $(this).parent().closest('.row').removeClass('primary secondary');
  }
});


$('#btnAddEmpField').on('click', function(){
	$('.emp-customize-form').append("<div class='row secondary'>\
  <div class='col'>\
    <select id='impSelect1'>\
      <option value='primary'>Primary</option>\
      <option value='secondary' selected>Secondary</option>\
      <option value='optional'>Optional</option>\
    </select>\
  </div>\
</div>");
})
                    

.row {
  padding: 10px 20px;
  background: purple;
}

select {
  width: 100px;
  height: 40px;
  background: #eee;
  border: 1px solid #333;
}

.primary {
  color: white;
  background-color: red;
}

.secondary {
  color: white;
  background-color: green;
}

.optional {
  color: white;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="emp-customize-form">
  <div class="row">
    <div class="col">
      <select id="impSelect1">
        <option value="primary" selected>Primary</option>
        <option value="secondary">Secondary</option>
        <option value="optional">Optional</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <select id="impSelect2">
        <option value="primary">Primary</option>
        <option value="secondary" selected>Secondary</option>
        <option value="optional">Optional</option>
      </select>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <select id="impSelect3">
        <option value="primary">Primary</option>
        <option value="secondary">Secondary</option>
        <option value="optional" selected>Optional</option>
      </select>
    </div>
  </div>
</div>

<span id="btnAddEmpField">add</span>

希望这对您有所帮助!