jQuery组元素并创建select标签

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>s并从它们的类型和值中创建一个数组对象.之后,创建一个<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演示