jquery - 添加对一个基于使用 jQuery 的选择列表中的类别

Question

<ul>我在一个页面上有一堆，<h2>每个页面上方都是一个类别名称。我将使用PHP每个类别名称填充选择列表<option>，但我需要知道如何<li>根据类别名称为每个列表添加一个新的。如何使用 jQuery 完成此任务？我没有任何入门代码。

编辑：请允许我澄清一下。我有这样的事情：

<form action="addSomething.php" method="post">
    <select name="categories">
        <option value="0">Pick one</option>
        <option value="1">Cat 1</option>
        <option value="2">Cat 2</option>
    </select>
    <input type="text" id="title" />
    <input type="text" id="URL" />
    <input type="submit" id="addNew">
</form>

<h2>Cat 1</h2>
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

我希望能够使用上面的表格选择一个类别（<h2>），输入名称和 URL，然后将其添加为<li>与所选类别相对应的新类别。

Answer 1

没有入门代码，很难提供帮助。这是一般的想法：

<h2>Sample List</h2>
<ul class="someClass"></ul>

<select>
    <option value="someval">some option</option>
    <option value="someval2">some option</option>
</select>

你的 JS 可以是：

$("select").change(function() {
    if (this.value == "someval") {
        $("ul .someClass").append("<li>" + this.value + "</li>");
    }
});

没有任何入门代码，很难找到您正在寻找的确切解决方案。

Answer 2

我不完全了解您的后继情况，但这可能会有所帮助：

$('h2.categoryName').each(function(){
    var name = $(this).text();
    $(this).next('ul').append('<li>' + name + '</li>');
});

Answer 3

选择每个ul，获取它的类别，附加一个li.

html

<h2 class="category">cat1</h2>
<ul></ul>
<h2 class="category">cat2</h2>
<ul></ul>
<h2 class="category">cat3</h2>
<ul></ul>

js

$("ul").each(function(){
    var category = this.prev("h2").text();
    $("<li>" + category + "</li>").appendTo(this);
});

这是一个工作小提琴。当然，您可以在这些lis元素中放置您想要的任何文本。