jquery - 如何处理多个选择输入框来处理相同的 jquery？

Question

我在这里寻找答案，但没有找到任何可以直接帮助我的东西，所以我要在这里问。

$(document).ready(function(){
  $(".sel").change(function() {
    var hh = $('.sel').val();
    if(hh == "info")
    {
      $(this).css("color" , "#333");
    }
    if(hh == "green")
    {
      $(this).css("color" , "green");
    }
    if(hh == "red")
    {
      $(this).css("color" , "red");
    }
    if(hh == "orange")
    {
      $(this).css("color" , "orange");
    }

  });
});

select.sel
{
  border:0;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  color: #333;   
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select>  
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select> 
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select>

当有单选输入但当我使用多选输入框时，这是完美运行的..这段代码不工作...请帮助..

提前致谢...

Answer 1

要在 onchange 事件中获取 select 的值，请使用 $(this).val() 而不是 $(".sel").val()。

因此 $(".sel").val() 将始终给出第一个选择元素的值。而 $(this).val() 将给出当前更改选择框的值。

$(document).ready(function(){
  $(".sel").change(function() {
    var hh = $(this).val();
    if(hh == "info")
    {
      $(this).css("color" , "#333");
    }
    if(hh == "green")
    {
      $(this).css("color" , "green");
    }
    if(hh == "red")
    {
      $(this).css("color" , "red");
    }
    if(hh == "orange")
    {
      $(this).css("color" , "orange");
    }

  });
});

select.sel
{
  border:0;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  color: #333;   
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select>  
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select> 
<select class="sel">
  <option selected value="info">Not Taken</option>
  <option value="green">Present</option>
  <option value="red">Absent</option>
  <option value="orange">Late</option>
</select>