如何處理多個選擇輸入框來處理相同的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>