JQuery-Wiele Opcji Wyboru
Próbuję pobrać wszystkie zaznaczone elementy w poniższym select multiple i oddzielić je przecinkiem. Kod znajduje się poniżej:
<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>
Wynik, którego szukam jest następujący:
Izolacja Ścian Mieszkalnych, Izolacja Ścian Komercyjnych,...
9 answers
Możesz użyć selektora :selected
oraz funkcji inline $.map()
jako części łańcucha.
$("option:selected").map(function(){ return this.value }).get().join(", ");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 16:36:27
Dodaj wartości do tablicy i użyj join
, aby utworzyć łańcuch:
var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 16:39:22
W przypadku wielu elementów select, polecenie val
elementu select
zwróci tablicę z zaznaczonymi wartościami opcji. Jeśli nie ma wartości, używany jest tekst elementu:
var output = $("#ps-type").val().join(', ');
Update: jednakże, gdy nie ma zaznaczonych opcji val()
zwraca null
nie pustą tablicę. Jeden sposób na obejście tego:
var output = ($("#ps-type").val() || []).join(', ');
Możesz się nim pobawić w tym demo, które ułożyłem.
From the docs :
W przypadku
<select multiple="multiple">
elements, metoda.val()
zwraca tablicę zawierającą każdą zaznaczoną opcję.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 17:02:19
var list = "";
$('#ps-type option:selected').each(function(){
list += this.value + ", ";
});
return list.substr(0, list.length - 2);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 16:27:53
Coś takiego powinno załatwić sprawę:
var result = "";
$('#ps-type option:selected').each(function(i, item){
result += $(this).val() + ", ";
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 16:32:13
Proszę bardzo:
var result = new Array();
$("#ps-type option:selected").each(function() {
result.push($(this).val());
});
var output = result.join(", ");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-18 16:31:49
$(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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-16 07:44:24
Spróbuj tego:
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(', ');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-28 21:47:04
Najprostsze rozwiązanie
Można po prostu użyć tylko .val()
like:
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-17 15:59:19