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>），输入一个名称＆amp; 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);
});

Here is a working fiddle。当然，您可以在lis个元素中添加所需的任何文本。

使用jQuery </ul> </li>基于选择列表中的类别将<li>添加到<ul>

3 个答案: