Change background of X amount of cells in jquery

Question

I need to make the form select box change the background color of the list item cells on the list below it for the number that is selected from the dropdown box.

So if a user selects 6 from the dropdown then the first 6 UL list items should change there background so they appear to be selected.

When the dropdown list is changed, it should save this value with ajax to a DB

I need to do this with jquery but I am stuck, I need to know how to change the first X amount of list item background colors and make the AJAX call on dropdown list change.

If a user goes to the page without even touching the dropdown list of numbers, it will be selected with the number pulled from a database so if the dropdown is selected as 12 from the database then the first 12 list items should have a differnt background color. So doing it ONLY on change of dropdown list would not work as it should take into account if a valu is already set from the DB.

Below is the basic html part of it to show what I need to change.

Can someone good with jquery help me out please?

<select name="topfriendNumber">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
</select>



<ul id="topfriends">
    <li friendID="0">
     <div>User 0</div>
    </li>
    <li friendID="1">
     <div>User 1</div>
    </li>
    <li friendID="2">
     <div>User 2</div>
    </li>
    <li friendID="3">
     <div>User 3</div>
    </li>
    <li friendID="4">
     <div>User 4</div>
    </li>
    <li friendID="5">
     <div>User 5</div>
    </li>
    <li friendID="6">
     <div>User 6</div>
    </li>
    <li friendID="7">
     <div>User 7</div>
    </li>
    <li friendID="8">
     <div>User 8</div>
    </li>
    <li friendID="9">
     <div>User 9</div>
    </li>
    <li friendID="10">
     <div>User 10</div>
    </li>
    <li friendID="11">
     <div>User 11</div>
    </li>
</ul>

Answer 1

Should do the trick:

$("select[name=topfriendNumber]").change(HighlightLIs);
$(document).ready(HighlightLIs);

function HighlightLIs()
{
    var num = $("select[name=topfriendNumber]").val();
    var lis = $("#topfriends li");

    for (var i = 0; i < num; i++)
    {
        lis[i].css("background-color", "red");
    }
}

Answer 2

You can do that in just a couple of lines if you make use of the lt selector:

$('select[name=topfriendNumber]').change(function() {
    var val = $(this).val();

    //reset style
    $('ul#topfriends > li').css("background-color", "");

    //apply to all LIs before value of select
    $('ul#topfriends > li:lt(' + val + ')').css("background-color", "red");
}).change();

Answer 3

Or use the filter with a condition on the index of the mapped elements

$("select[name=topfriendNumber]").change(function(){
    $("#topfriends li").filter(function (index) {
              return index < $("select[name=topfriendNumber]").val();
            }).css('backgroundColor', 'red');});