JQuery-Несколько Вариантов Выбора
Я пытаюсь захватить все выбранные элементы в следующем select multiple и разделить их запятыми. Код ниже:
<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>
результат, который я ищу, следующий:
Жилой - Утепление Стен, Торгово - Утепление Стен, ...
9 ответов
можно использовать :selected
селектор и встроенный $.map()
функция как часть вашей цепи.
$("option:selected").map(function(){ return this.value }).get().join(", ");
добавлять значения в массив и использовать join
создать строки:
var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');
на элементе множественного выбора на select
элемент возвращает массив выбранных значений параметров. Если значения отсутствуют, используется текст элемента:
var output = $("#ps-type").val().join(', ');
обновление: однако, когда нет выбранных параметров val()
возвращает null
не пустой массив. Один из способов обойти это:
var output = ($("#ps-type").val() || []).join(', ');
вы можете играть с ним в это демо я собрал.
от документы:
в случае
<select multiple="multiple">
элементов.val()
метод возвращает массив, содержащий каждый выбранный параметр.
var list = "";
$('#ps-type option:selected').each(function(){
list += this.value + ", ";
});
return list.substr(0, list.length - 2);
что-то вроде этого должно сделать трюк:
var result = "";
$('#ps-type option:selected').each(function(i, item){
result += $(this).val() + ", ";
});
здесь вы идете:
var result = new Array();
$("#ps-type option:selected").each(function() {
result.push($(this).val());
});
var output = result.join(", ");
$(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>
попробуйте это:
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(', ');
самое простое решение
вы можете просто использовать just .val()
как :
console.log( $('#ps-type').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ps-type" name="ps-type" multiple="multiple" size="5">
<option selected>Residential - Wall Insulation</option>
<option>Residential - Attic /Crawl Space Insulation</option>
<option>Residential - Foundation Insulation</option>
<option>Residential - Exterior Roof System</option>
<option selected>Commercial - Wall Insulation</option>
<option>Commercial - Air Barrier System (Walltite)</option>
<option selected>Commercial - Roof System</option>
</select>