jQuery 分组元素并创建选择标签

发布于 2024-10-25 09:51:49 字数 546 浏览 0 评论 0原文

好的，这就是我所拥有的

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

您将如何处理？

原文

Ok here's what i have

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

And what i want to do is go through them, group them and create a select dropdown like this:

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

How would you approach that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁许谁一生繁华 2024-11-01 09:51:49

好吧，今晚我想在睡觉前写一些 jQuery 代码来娱乐一下。

基本上，迭代您的

并根据其类型和值创建数组对象。之后，创建一个

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

Well, I felt like writing some jQuery code tonight for kicks before I go to bed.

Basically, iterate through your <div>s and make an object of arrays out of their types and values. After that, make a <select>, iterate through the object and add dropdown <option>s containing its types and values.

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

回复收藏 0 原文

征棹 2024-11-01 09:51:49

类似于：

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 中以便于操作。

Something like:

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); }
});

Now you have the them in options for easy manipulation.

回复收藏 0 原文

~没有更多了~