Question

我需要让表单选择框更改下面列表中列表项单元格的背景颜色，以获取从下拉框中选择的数字。

因此，如果用户从下拉列表中选择6，那么前6个UL列表项应该在背景中更改，以便它们看起来被选中。

当更改下拉列表时，它应该使用ajax将此值保存到DB

我需要使用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 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 2

应该做的诀窍：

$("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 3

或者使用带有映射元素索引的条件的过滤器

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

在jquery中更改X个单元格的背景

3 个答案: