新增中 <li> 到 <ul> 基于使用jQuery的选择列表中的类别

Question

I have a bunch of <ul> on a page with <h2> just above each one that is a category name. I am going to use PHP to populate the select list with each category name as an <option> , but what I need to know how to do is add a new <li> to each list based on the category name. How can I accomplish this using jQuery? I don't have any starter code.

EDIT: Allow me to clarify. I have something like this:

<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>

I want to be able to use the form above to select a category (the <h2> ), enter a name & URL, and then add it as a new <li> that corresponds to the selected category.

Answer 1

Without starter code, very hard to help. Here's the general idea:

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

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

And your JS can be:

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

Without any starter code, it's difficult to the exact solution you're looking for.

Answer 2

I don't understand exactly what your after, but this may help:

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

Answer 3

Select each ul , get it's category, append an 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 . Of course you can put whatever text you want inside those lis elements.