JQuery - 多個選擇選項

我想抓住以下所有選定的項目選擇倍數，並用逗號分隔它們。代碼如下：JQuery - 多個選擇選項

<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

來源

2010-02-18 Brad Birdsall

您可以使用:selected選擇器和內聯$.map()函數作爲鏈中的一部分。

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

來源

2010-02-18 16:36:27 Sampson

同意。對於完整的jQuery性感，map（）絕對是最佳選擇。 – user113716 2010-02-18 16:41:49

完整的jQuery的性感是強制性的;） – Sampson 2010-02-18 16:43:04

打我吧，.map（）方式更優雅！ – 2010-02-18 16:51:51

像這樣的東西應該做的伎倆：

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

來源

2010-02-18 16:26:07

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

來源

2010-02-18 16:27:53

你錯過了後「選項」 :selected否則你會選擇每一個選項，而不僅僅是那些選擇 – 2010-02-18 16:30:07

好去處，現在添加它:-) – 2010-02-18 16:34:48

值添加到一個數組，並使用join創建的字符串：

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

來源

2010-02-18 16:29:44 Guffa

您需要文本（）而不是val（） – kgiannakakis 2010-02-18 16:31:15

'val（）'實際上仍然會從選項中獲取文本if ere沒有價值屬性。 – 2010-02-18 16:33:31

我剛剛嘗試過，val（）工作得很好。 – 2010-02-18 16:34:06

在這裏你去：

var result = new Array(); 

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

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

來源

2010-02-18 16:31:49

在多個選擇元件，所述select元件的val命令將返回選定的選項值的陣列。如果沒有值存在時，該元件的文本用於：

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()方法返回包含每個選擇的選項的陣列。

來源

2010-02-18 16:48:58

雖然沒有選擇任何選項的錯誤，對吧？ – 2010-02-18 16:58:30

@Russell，好點。我更新了我的答案，以適應非選擇。還有很多其他的方法。 – 2010-02-18 17:02:54

偉大的解決方案。謝謝！ – 2012-05-29 15:40:12

$(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>

來源

2016-07-16 07:44:24

如果你添加一些評論，爲什麼你編寫/編輯該代碼以便其他人可以理解，這會更好。 – 2016-07-16 07:49:41

試試這個：

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(', ');

來源

2017-01-28 21:47:04 Regan

JQuery - 多個選擇選項

回答

相關問題