Question

我试图使用jquery创建选择框，但链接随机填充，所以我需要循环通过链接并抓住它以使选择框，这里是我的代码任何想法如何使用短手/循环？感谢

HTML：

<p>
    <a href="#">option1</a>
    <a href="#">option2</a>
    <a href="#">option3</a>
</p>

<select  id="select"></select>

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

Fiddle

Answer 1

var $this = $(this);

$('p a').each(function(){
    $this.append('<option value="">' + $(this).text() + '</option>');
});

http://jsfiddle.net/QgCqE/1/

Answer 2

一个更清洁，更面向jQuery的解决方案 James Montagne 的回答：

$this.append( $('<option/>').val('').text($(this).text()) );

或具有属性映射的替代方案：

$this.append($("<option/>", {
    value: '',
    text: $(this).text()
}));

Answer 3

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

Answer 4

$('#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);

 });
}

Answer 5

除非您计划将其用于服务器下拉，否则无需任何功能。

var ddl = $("#select");

$("p a").each(function () {
    var link = $(this);
    ddl.append($("<option></option>").val(link.text()).html(link.text()));
});

Answer 6

要使元素中的循环使用$.each

除非你想让它可重用，否则你不需要扩展jQuery。

LIVE DEMO

$.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');

jQuery使用循环创建选择选项

6 个答案: