JQuery - несколько опций выбора

Question

Я пытаюсь захватить все выбранные элементы в следующем порядке выбора и разделить их запятой. Код ниже:

<select id="ps-type" name="ps-type" multiple="multiple" size="5"> 
    <option>Residential - Wall Insulation</option> 
    <option>Residential - Attic /Crawl Space Insulation</option> 
    <option>Residential - Foundation Insulation</option> 
    <option>Residential - Exterior Roof System</option> 
    <option>Commercial - Wall Insulation</option> 
    <option>Commercial - Air Barrier System (Walltite)</option> 
    <option>Commercial - Roof System</option> 
</select> 

результата я ищу заключается в следующем:

Жилого - утепление стен, Коммерческого - утепление стен, ...

Спасибо за помощь. -B

Answer 1

Вы можете использовать селектор :selected, а встроенная функция $.map() - часть вашей цепочки.

$("option:selected").map(function(){ return this.value }).get().join(", "); 

Answer 2

Что-то вроде этого следует сделать трюк:

var result = ""; 
$('#ps-type option:selected').each(function(i, item){ 
    result += $(this).val() + ", "; 
}); 

Answer 3

var list = ""; 
$('#ps-type option:selected').each(function(){ 
    list += this.value + ", "; 
}); 
return list.substr(0, list.length - 2); 

Answer 4

Добавить значения в массив и использовать join для создания строки:

var items = []; 
$('#ps-type option:selected').each(function(){ items.push($(this).val()); }); 
var result = items.join(', '); 

Answer 5

Здесь вы идете:

var result = new Array(); 

$("#ps-type option:selected").each(function() { 
    result.push($(this).val()); 
}); 

var output = result.join(", "); 

Answer 6

На множественном выборе элемента, то val командования select элемента возвращает массив выбранных значений опций. Если значения не присутствуют, текст элемента используется:

var output = $("#ps-type").val().join(', '); 

обновление: Однако, когда нет выбранных опций val() возвращает null не пустой массив. Один из способов обойти это:

var output = ($("#ps-type").val() || []).join(', '); 

Вы можете поиграть с ним в this demo I put together.

От the docs:

В случае <select multiple="multiple"> элементов, метод .val() возвращает массив, содержащий каждую выбранную опцию.

Answer 7

$(function() { 
 
     $('#colorselector').change(function(){ 
 
      $('.colors').hide(); 
 
      $('#' + $(this).val()).show(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<Select id="colorselector" multiple="multiple" size="2"> 
 
    <option value="red">Red</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="blue">Blue</option> 
 
</Select> 
 
<div id="red" class="colors" style="display:none"> red... </div> 
 
<div id="yellow" class="colors" style="display:none"> yellow.. </div> 
 
<div id="blue" class="colors" style="display:none"> blue.. </div>

Answer 8

Попробуйте это:

var List = new Array(); 
    $('#ps-type option:selected').each(function() { 
     if ($(this).length) { 
       var sel= { 
        name: $this.text() 
       } 
     } 
     List.push(sel); 
    }); 
    var result = List.join(', ');