如何处理多个选择输入框来处理相同的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()将为当前更改选择框提供值。

＆＃13;

＆＃13;

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

  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要获取当前选择的值（使用 $（this）.val（） ）。一个工作的例子：

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".sel").change(function() {
      // Take value of a current select element
      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");
      }
      
});
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;