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,...

Author: Zakaria Acharki, 2010-02-18

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(", ");
 76
Author: Sampson,
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(', ');
 22
Author: Guffa,
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ę.

 9
Author: Doug Neiner,
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);
 2
Author: Russell Giddings,
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() + ", ";
});
 2
Author: Raul Agrait,
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(", ");
 1
Author: Mark Bell,
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>
 0
Author: Vilgar Mkrtchyan,
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(', ');
 0
Author: Regan,
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>
 0
Author: Zakaria Acharki,
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