如何处理多个选择输入框来处理相同的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>

这是完全运行时，有一个选择输入，但是当我使用了多个选择输入框.. 这个代码是没有工作... plz帮助..

在此先感谢...

Answer 1

要获取选择内部onchange事件的值，请使用$(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>

Answer 2

你需要获得当前的值只选择（使用$（本）.VAL（））。工作示例：

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

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>