JQuery добавить для выбора с массивом - PullRequest
Новая
       30

JQuery добавить для выбора с массивом

1 голос
/ 11 февраля 2011

очень просто, но угадайте, что, не для меня. У меня есть список, разделенный запятыми, например: Option1, Option2, Option3, которые я хочу добавить к <select>, чтобы он стал <select><option>Option1</option><option>Option2</option><option>Option3</option></select>

Я могу «разделить» список следующим образом (внутри функции, которая получает список): 

var optionsarray = $(this).val().split(',');

    $(optionsarray).each(function(i){
        var seloption = '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>'; 
    });

Но теперь, как мне добавить seloption в мой список выбора. Если я поставлю 

$('#selecttoappendto').append('<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>');

или 

$('#selecttoappendto').append(seloption);

внутри каждого цикла ничего не происходит. Возьмите его за пределы каждого, который я могу добавить, скажем optionsarray[0] или optionsarray[1] и т. Д., Но я не могу добавить optionsarray[i], каким бы способом я ни делал (внутри или снаружи каждого). Помогите пожалуйста - заранее спасибо

Ответы [ 2 ]

3 голосов
/ 11 февраля 2011

Начиная с пустой строки, вы можете построить строку в цикле, используя +=. Тогда .append() строка. 

var optionsarray = $(this).val().split(',');

var seloption = "";

$.each(optionsarray,function(i){
    seloption += '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>'; 
});

$('#selecttoappendto').append(seloption);

или другой вариант - построить элементы отдельно, сохранить их в контейнере, а затем добавить их из контейнера. 

var optionsarray = $(this).val().split(',');

var temp_sel = $('<select>');

$.each(optionsarray,function(i){
    temp_sel.append('<option>',{text:optionsarray[i],
                                value:optionsarray[i]
                                });
});

temp_sel.children().appendTo('#selecttoappendto');

Исправлено пропущенное () после children.

0 голосов
/ 22 января 2012

Вот что я написал и использую; это немного быстрее, чем решение, которое предоставил пользователь113716, потому что вы пропускаете создание временного выбора, все те, которые добавляются к этому временному выбору (даже если это фрагмент DOM, он все еще занимает некоторое время), и вы также пропускаете поиск .children () и распаковываете в конце этого последнего добавления. 

// Appends multiple elements all at once; maintains chaining
$.fn.appendAll = function ($eleArr) {
    var numEles = $eleArr.length
    ,    $useEle = new $();
    if (numEles) {
        while (numEles--) {
            $useEle = $eleArr[numEles].add($useEle);
        }
        return $(this).append($useEle);
    }
};

// Prepends multiple elements all at once; maintains chaining
$.fn.prependAll = function ($eleArr) {
    var numEles = $eleArr.length
    ,    $useEle = new $();
    if (numEles) {
        while (numEles--) {
            $useEle = $eleArr[numEles].add($useEle);
        }
        return $(this).prepend($useEle);
    }
};

Итак: 

var optsArr = $(this).val().split(','),
    $options = [],
    thisOption;

$.each(optsArr, function(i) {
    thisOption = '<option value="' + optsArr[i] + '">' + optsArr[i] + '</option>';
    $options.push($(thisOption));
});

$yourSelect.appendAll(optsArr);

Я действительно написал эти плагины именно для этого; Делая это таким образом, я создаю 1500 + вариант выбора менее чем за 250 мс. : D

...