2010-02-18 27 views
39

मैं निम्नलिखित चयनित एकाधिक में सभी चयनित आइटमों को पकड़ने और उन्हें अल्पविराम से अलग करने की कोशिश कर रहा हूं। कोड के नीचे है: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> 

परिणाम मैं देख रहा हूँ निम्नलिखित है:

आवासीय - वॉल इन्सुलेशन, वाणिज्यिक - वॉल इन्सुलेशन, ...

मदद के लिए धन्यवाद।

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

उत्तर

71

आप :selected चयनकर्ता का उपयोग कर सकते हैं, और आपकी श्रृंखला के हिस्से के रूप में इनलाइन $.map() फ़ंक्शन का उपयोग कर सकते हैं।

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

सहमत हुए। पूर्ण jQuery कामुकता के लिए, मानचित्र() निश्चित रूप से जाने का तरीका है। – user113716

+8

पूर्ण jQuery सेक्सनेस अनिवार्य है;) – Sampson

+0

मुझे इसे हराया, .map() रास्ता और अधिक सुरुचिपूर्ण! –

1

कुछ इस तरह चाल करना चाहिए:

var result = new Array(); 

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

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

आप और आप हर विकल्प का चयन करेंगे :selected "विकल्प" के बाद कर रहे हैं, और न कि केवल वे चयनित –

+0

अच्छा स्थान, इसे अभी जोड़ा गया :-) –

22

एक सरणी के लिए मान जोड़ें और join का उपयोग स्ट्रिंग बनाने के लिए:

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

आपको टेक्स्ट() की आवश्यकता है और वैल नहीं() – kgiannakakis

+1

'वैल() 'वास्तव में अभी भी एक विकल्प से पाठ प्राप्त करेगा यदि वें ईआर कोई मूल्य विशेषता नहीं है। –

+0

मैंने अभी कोशिश की है, वैल() बस ठीक काम करता है। –

9

एक बहु का चयन तत्व पर, 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() विधि प्रत्येक चयनित विकल्प युक्त एक सरणी देता है।

+0

त्रुटि जब कोई विकल्प नहीं चुना जाता है, है ना? –

+0

@Russell, अच्छा बिंदु। मैंने एक गैर चयन को समायोजित करने के लिए अपना जवाब अपडेट किया। अन्य तरीकों का एक टन भी है। –

+0

ग्रेट समाधान। धन्यवाद! –

0

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

बेहतर होगा यदि आप कुछ टिप्पणियां जोड़ते हैं तो आपने उस कोड को क्यों लिखा/संपादित किया ताकि अन्य लोग समझ सकें। –

0

इस प्रयास करें:

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(', '); 
संबंधित मुद्दे