Question

好的，这就是我所拥有的

<div>
 <h2 class="type">A</h2>
 <p class="value">12</p>
</div>

<div>
 <h2 class="type">A</h2>
 <p class="value">24</p>
</div>

<div>
 <h2 class="type">B</h2>
 <p class="value">35</p>
</div>

我想要做的就是浏览它们，将它们分组并创建一个像这样的选择下拉列表：

<select>
 <option value="12,24">A</option>
 <option value="35">B</option>
</select>

你会怎么做？

Answer 1

好吧，我想在我上床睡觉之前今晚写一些jQuery代码。

基本上，遍历你的<div>并从类型和值中创建一个数组对象。之后，创建一个<select>，遍历该对象并添加包含其类型和值的下拉列表<option>。

var types = {};

$('div').each(function() {
    var type = $('.type', this).text();
    var value = $('.value', this).text();
    if (!types[type]) types[type] = [];

    types[type].push(value);
});

var select = $('<select></select>');

$.each(types, function(i, v) {
    select.append('<option value="' + v + '">' + i + '</option>');
});

select.appendTo('body');

jsFiddle demo

Answer 2

类似的东西：

var options;

$("p.type").each(function(i, el){
    el = $(el);
    var value = el.siblings("p.value").text();

    if(options[el.text()] == null){
        options[el.text()] = [value];
    } else { options[el.text()].push(value); }
});

现在你可以将它们放在options中以便于操作。

jQuery组元素并创建select标签

2 个答案: