按类将 javascript 应用于多个项目

Question

I have some select boxes that I want to have color coded. There are three per row, by 18 rows.

It is easy to color code the drop down, but I need to use Javascript to color code the display of the selected item. I have cobbled together a script that does it, but only for the first one on the page .. and it changes ALL of them to the same color. I need the script to apply to each one independently. I am very much a beginner at Javascript. I have figured out that I need to use the var i thing, but I can't get it to work.

<td>
    <div>
        <select type="" name="tee_condition" class="selectcondition"  id="tee_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['tee_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['tee_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['tee_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['tee_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                    
        </select>                                               
    </div>
</td>
<td class="text-center">
    <div>
        <select type="" name="fairway_condition" class="selectcondition"  id="fairway_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['fairway_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['fairway_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['fairway_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['fairway_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                    
        </select>                                               
    </div>
</td>
<td class="text-center">                                                
    <div>
        <select type="" name="green_condition" class="selectcondition"  id="green_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['green_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['green_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['green_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['green_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                  
        </select>                                               
    </div>
</td>

And my javascript is:

    //**** Script to Color the Dropdowns
$(document).ready(function () {
    colorSelect(); // call this first so we start out with the correct Color
    // this will call our function every time the selection value of the field changes
    $(".selectcondition").change(function () {
        colorSelect();
    });

});
// this changes the color of the selected item
function colorSelect() {
    if ($(".selectcondition").val() === "Excellent"){
        $('.selectcondition').css('color','#5cb85c');
    }else if($(".selectcondition").val() === "Good"){
        $('.selectcondition').css('color','#0275d8');
    }else if($(".selectcondition").val() === "Fair"){
        $('.selectcondition').css('color','#f0ad4e');
    }else {
        $('.selectcondition').css('color','#FF0000');
    }
}

Answer 1

.css will set the CSS of all matching elements. Iterate over the selects with each instead, and get a reference to the current one you're iterating over with this .

You can also make the code much more concise by using an object indexed by option values instead of repetitive if / else statements:

 function colorSelect() { const colors = { Excellent: '#5cb85c', Good: '#0275d8', Fair: '#f0ad4e', Poor: '#FF0000' } $(".selectcondition").each(function() { $(this).css('color', colors[this.value]); }); } colorSelect(); $(".selectcondition").change(colorSelect);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <td> <div> <select type="" name="tee_condition" class="selectcondition" id="tee_condition"> <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'tee_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option> <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'tee_condition']=='Good' ){echo 'selected';} ?> >Good</option> <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'tee_condition']=='Fair' ){echo 'selected';} ?> >Fair</option> <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'tee_condition']=='Poor' ){echo 'selected';} ?> >Poor</option> </select> </div> </td> <td class="text-center"> <div> <select type="" name="fairway_condition" class="selectcondition" id="fairway_condition"> <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'fairway_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option> <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'fairway_condition']=='Good' ){echo 'selected';} ?> >Good</option> <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'fairway_condition']=='Fair' ){echo 'selected';} ?> >Fair</option> <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'fairway_condition']=='Poor' ){echo 'selected';} ?> >Poor</option> </select> </div> </td> <td class="text-center"> <div> <select type="" name="green_condition" class="selectcondition" id="green_condition"> <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'green_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option> <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'green_condition']=='Good' ){echo 'selected';} ?> >Good</option> <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'green_condition']=='Fair' ){echo 'selected';} ?> >Fair</option> <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'green_condition']=='Poor' ){echo 'selected';} ?> >Poor</option> </select> </div> </td>