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

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

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

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

我需要用jquery来实现这一点，但我被卡住了，我需要知道如何更改列表项背景颜色的前X个数量，并在下拉列表更改时进行AJAX调用

如果用户进入页面时甚至没有触摸数字下拉列表，则会从数据库中选择数字，因此如果从数据库中将下拉列表选择为12，则前12个列表项应具有不同的背景颜色。因此，仅在更改下拉列表时执行此操作将不起作用，因为如果已经从DB设置了值，则应将其考虑在内

下面是它的基本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>

我们应该这样做：

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

---

如果您使用以下工具，只需几行即可完成：

---

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

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

---

它在更新之前部分工作，但现在似乎没有改变任何CellsHanks，它正在工作，我在页面上的代码位置错误，JS在页面中的位置太高。只有几个问题，如果你选择6，它会突出显示5，总是比原来少1个数字。另外，如果您转到该页面，并且已经选择了数字，如6，则什么都不是highlighted@jasondavis-这很容易分类，我会添加更多的代码。1其他问题，如果您能够帮助解决任何问题，我将非常感谢您的帮助。如果高亮显示了6个项目，并且我将一个新项目拖动到适当的位置，则应进行调整，使其显示为6个高亮显示的单元格是一个覆盖。对不起，我想我之前没有提到这是一个拖放列表。因此，如果6个项目突出显示，并且我将任何不在6中的项目移动到6突出显示区域中，则新项目不会显示highlighted@jasondavis-当您访问页面且已选择某个内容时，如果不突出显示，则可以在事件处理程序看到“我的编辑”后立即调用change来解决此问题。至于拖拽的部分，我从来没有使用过拖拽或可放下的，所以我认为你最好还是把它作为另一个问题来问。

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