在选择标记中设置单个选项元素的颜色

Question

有没有办法将第一个选项“选择”的颜色更改为红色，将其余选项更改为绿色？

到目前为止，toggleClass 允许我在颜色之间进行更改，但我希望每当用户单击“选择”时颜色变为红色，而每当有人单击其余选项时颜色变为绿色（即“服务一，服务-两个”等）。

HTML：

  <div class="field">
    <label>Service</label>
    <select id="select">
      <option>Select</option>
      <optgroup label="Type of Service">
        <option>Service-One</option>
        <option>Service-Two</option>
      </optgroup>
      <optgroup label="Type of Service">
        <option>Service-Three</option>
        <option>Service-Four</option>
      </optgroup>
    </select>
  </div>

这是我的 jQuery：

$("select").each(function(){
    $(this).toggleClass('success-select');
}); 

这是我的 codePen：http://codepen.io/johnnyginbound/pen/MYmaaz

Answer 1

只需检查更改时的选择值。 你甚至可以添加一个失败类：

//first color all the options:
$('#select option').css({
  "color":"green"
});
//color group names gray:
$('#select optgroup').css({
  "color":"#555555"
});
//color first option red:
$('#select option').eq(0).css({
  "color":"red"
});
//attach a handler to fire when select value is changed
$('#select').change(function(){
  if($(this).val()==="Select"){
      $(this).removeClass("success-select");
    $(this).addClass("failure-select");
  }
  else{
    $(this).removeClass("failure-select");
      $(this).addClass("success-select");
  }
});

form {
  margin: 7em auto;
  width: 30%;
  font-family: 'Helvetica';
}

div.field {
  padding-top: 2em;
  border-bottom: 1px solid black;
}
button {
  margin: 2em auto;
  width: 100%;
  padding: 1em;
  cursor: pointer;
  background: none;
}
button:hover {
  background-color: #444444;
  color: #fff;
}

label {
  display: none;
}

input,
select {
  outline: none;
  border: none;
  width: 100%;
  background: none;
}
select {
  color: red;
}
.success-select {
  color: green;
}

select:focus {
  outline: none; 
  border: none;

}
input {
  margin-bottom: 10px;
}
/* Styling the placeholders */
input::-webkit-input-placeholder {
  color: #2f3238;
  font-weight: bold;
}
.failure-select{
  font-weight:bold;
  -webkit-animation: blinkRed 500ms 3;
  animation: blinkRed 500ms 3;
}
@keyframes blinkRed{
  0%{
    color:black;
  }
  50%{
    color:red;
  }
  100%{
    color:black;
  }
}
@-webkit-keyframes blinkRed{
  0%{
    color:black;
  }
  50%{
    color:red;
  }
  100%{
    color:black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><a href="http://ryanscherf.net">Ryan Scherf's</a> contact form served as inspiration- so I decided to recreate it with a small jquery update on the select tag.</span>

<form>
  <div class="field">
    <label>Name</label>
    <input type="text" placeholder="Name" class="name-field">
  </div>
  
  <div class="field">
    <label>Email</label>
    <input type="text" placeholder="Email" class="email-field">
  </div>

  <div class="field">
    <label>Service</label>
    <select id="select">
      <option>Select</option>
      <optgroup label="Type of Service">
        <option>Service-One</option>
        <option>Service-Two</option>
      </optgroup>
      <optgroup label="Type of Service">
        <option>Service-Three</option>
        <option>Service-Four</option>
      </optgroup>
    </select>
  </div>

  <div class="field">
    <label>Project Description</label>
    <input type="text" placeholder="Project Description" class="project-field">
  </div> 
  <button>Submit</button>
</form>