Создание строки с разделителями-запятыми, из выбранного элемента в jQuery

Question

Вот что происходит. У меня есть элемент select, для которого мне нужно получить строку с разделителями-запятыми из всех ее опций, независимо от того, выбран ли она.

Как я могу, в JQuery/JavaScript принять это:

<select id="currentTags" multiple> 
     <option>Nature</option> 
     <option>Cats</option> 
     <option>Space</option> 
    </select> 

и превратить его в это:

"Nature, Cats, Space" 

Я пытался найти способы сделать это так и не смог ... Я все еще изучаю javascript, и мои ограниченные знания останавливают меня на моих треках.

Любая помощь будет оценена, даже если это просто для того, чтобы вести меня в правильном направлении. Спасибо за ваше время.

Answer 1

С JQuery:

var result = $('#currentTags option').map(function(i, opt) { 
    return $(opt).text(); 
}).toArray().join(', '); 

В простом JavaScript вы можете сделать что-то подобное, как это:

// Convert pseudo-arrays to real arrays 
var __slice = Array.prototype.slice; 

// Get select options as real array 
var opts = __slice.call(document.querySelectorAll('#currentTags option')); 

// Map the text of each option 
var result = opts.map(function(x) { 
    return x.textContent; 
}).join(', '); 

console.log(result); //=> "Nature, Cats, Space" 

Преимущество абстрагирования элементов в коллекции вместо зацикливания является то, что вы поддерживаете последовательный API (как jQuery), и вам не нужно создавать дополнительные переменные для псевдоресурсов, поскольку реальные массивы могут использовать все методы массива.

Смотрите MDN, чтобы узнать больше о DOM и методах и свойствах, которые можно использовать, как querySelectorAll, children, textContent и многое другое.

Редактировать: Это должно работать в IE9 + и во всех современных браузерах.

Answer 2

Простое решение будет:

// Initialize your string 
var output_string = ""; 

// For each 'option' tag, append its value to the string with the comma 
$('#currentTags option').each(function() { 
    output_string = output_string+this.text; 
}); 

// Removing the last ', ' which were added during the loop 
output_string = output_string.substr(0, output_string.length-2); 

Here's a Fiddle to see it into action :)

Answer 3

Равнина старый Javascript (POJS) способ получить коллекцию Выбрать,-х вариантов, а затем цикл по нему, чтобы получить значения и создать строку с требуемым форматом, например

var options = document.getElementById('currentTags').options; 
var values = []; 

for (var i=0, iLen=options.length; i<iLen; i++) { 
    values.push(options[i].text); 
} 

alert(values.join(',')); 

Вы можете написать, что в гораздо более сжатой форме, но производительность может пострадать и в зависимости от особенностей используемых, может произойти сбой в некоторых браузерах. Вышеприведенная информация обеспечивает ясность и удобство обслуживания кода, производительность будет, по крайней мере, столь же быстрой, как и любая альтернатива.

Answer 4

Как насчет:

var tags = []; 
$('#currentTags option').each(function() { 
    tags.push($(this).val()); 
}); 

console.log(tags.join(', ')); // 'Nature, Cats, Space' 

http://jsfiddle.net/wN2Dk/

Answer 5

Вот простой JQuery пример:

var arr = []; // create array 

$('#currentTags').children().each(function() { 
    arr.push($(this).text()); // add option text to array 
}); 

alert(arr.join(', ')); // Nature, Cats, Space 

Если вы хотите вариант value, переключатель text() в val();)