jQuery 使用循环创建选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19436262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery create select options using loop
提问by Johnny Derp
Im trying to create select box using jquery but the links populates randomly so I need to loops thru links and grab it to make select box, here is my code any idea how to use a short hand/loop? Thanks
我试图使用 jquery 创建选择框，但链接随机填充，所以我需要通过链接循环并抓住它来制作选择框，这是我的代码，知道如何使用短手/循环吗？谢谢
HTML:
HTML：
<p>
<a href="#">option1</a>
<a href="#">option2</a>
<a href="#">option3</a>
</p>
<select id="select"></select>
JS:
JS：
$.fn.populate = function() {
var option1 = $('p a:eq(0)').text();
var option2 = $('p a:eq(1)').text();
var option3 = $('p a:eq(2)').text();
$(this)
.append('<option value="">' + option1 + '</option>')
.append('<option value="">' + option2 + '</option>')
.append('<option value="">' + option3 + '</option>')
}
$('#select').populate();
回答by James Montagne
var $this = $(this);
$('p a').each(function(){
$this.append('<option value="">' + $(this).text() + '</option>');
});
回答by FAjir
A Cleaner and more jQuery-oriented solutionof James Montagne's answer:
一个更清洁，更jQuery的面向解决方案的詹姆斯·蒙塔涅的回答：
$this.append( $('<option/>').val('').text($(this).text()) );
or the alternative with properties mapping:
或具有属性映射的替代方案：
$this.append($("<option/>", {
value: '',
text: $(this).text()
}));
回答by kasper Taeymans
http://jsfiddle.net/kasperfish/RY3U9/4/
http://jsfiddle.net/kasperfish/RY3U9/4/
var selectbox=$("#select");//cache our slectbox, so jquery doesn't have to look for it in every loop.
$('p > a').each(function(){//select all a tags in p (loop through them)
var text=$(this).text();//cache the link text in a variable because we need it twice.
selectbox.append($('<option>').text(text).val(text));//add new option with value en text to selectbox
})
回答by Musa
$('#new_organizations').click(loadOrgTypes);
function loadOrgTypes() {
console.log('retrieving all Org Types');
$.ajax({
type: 'GET',
url: rootURL+'org_types',
dataType: "json", // data type of response
success: renderOrgTypes,
error: function(err){
console.log('Error');
console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
}
});
}
function renderOrgTypes(data){
var list = data == null ? [] : (data instanceof Array ? data : [data]);
var select = $("#org_types_select");
select.empty();
$.each(list , function(index, org_types) {
var content='<option org_type_id="' + org_types.id + '">' + org_types.name_loc + '</option>';
select.append(content);
});
}
回答by Oswaldo Acauan
To make the loop in your elements use $.each
要使元素中的循环使用$.each
You dont need extend jQuery unless you want to make it reusable.
除非您想让它可重用，否则您不需要扩展 jQuery。
$.fn.populate = function(el) {
var options = '';
$(el).each(function(i, e) {
options += '<option>' + $(this).text() + '</option>';
});
this.append(options);
return this;
}
$('#select').populate('p > a');
回答by Nikita Silverstruk
No need for a function unless you are planning to use it for sever drop downs.
除非您打算将其用于服务器下拉菜单，否则不需要函数。
var ddl = $("#select");
$("p a").each(function () {
var link = $(this);
ddl.append($("<option></option>").val(link.text()).html(link.text()));
});
