Изменить фон количества клеток в jquery

Question

Мне нужно, чтобы поле выбора формы изменило цвет фона ячеек элемента списка в списке под ним для номера, выбранного в раскрывающемся списке.

Таким образом, если пользователь выбирает 6 из выпадающего списка, тогда первые 6 элементов списка UL должны изменить свой фон таким образом, чтобы они выглядели выбранными.

Когда раскрывающийся список изменяется, он должен сохранить это значение с помощью ajax в БД

Мне нужно сделать это с помощью jquery, но я застрял, мне нужно знать, как изменить первое X количество цветов фона элемента списка и сделать вызов AJAX при изменении раскрывающегося списка.

Если пользователь переходит на страницу, даже не касаясь раскрывающегося списка номеров, он будет выбран с номером, извлеченным из базы данных, поэтому, если в раскрывающемся списке выбрано 12 из базы данных, первые 12 элементов списка должны другой цвет фона. Таким образом, выполнение ТОЛЬКО при изменении раскрывающегося списка не будет работать, так как следует учитывать, что значение уже установлено в БД.

Ниже приведена основная html-часть, показывающая, что мне нужно изменить.

Может ли кто-нибудь хороший с jquery помочь мне, пожалуйста?

<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

Вы можете сделать это всего за пару строк, если используете селектор lt :

$('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 2

Или используйте фильтр с условием на индекс отображаемых элементов

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

Answer 3

Должен сделать трюк:

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