的jQuery族元素，创造选择标签

-1

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

你会怎么做？

来源

2011-03-19 tsiger

你尝试过什么？ – BoltClock 2011-03-19 22:10:53

IKR？他们只是要求我们写他们的代码。 – mattsven 2011-03-19 22:14:58

downvote有什么用？ – BoltClock 2011-03-19 22:36:17

嗯，我觉得今天晚上睡觉前写一些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 demo

来源

2011-03-19 22:18:23 BoltClock

看，我会猜你会使用Javascript。 – 2011-03-19 22:28:56

@Jared Farrish：不是很了解你的jQuery/JS评论，我一定很累。谨慎阐述？ *编辑*再看一遍，那里肯定有很多普通的JS，如果这就是你所指的。 – BoltClock 2011-03-19 22:35:01

适合我:) thanx – tsiger 2011-03-19 22:38:55

喜欢的东西：

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

来源

2011-03-19 22:18:06 mattsven

的jQuery族元素，创造选择标签

回答

相关问题