<select multiple = एकाधिक> से सभी चयनित मान कैसे प्राप्त करें?

Question

समझा गया अजीब मैं इसे पहले से ही नहीं मिला, लेकिन यहां यह जाता है!

<select id="select-meal-type" multiple="multiple"> 
    <option value="1">Breakfast</option> 
    <option value="2">Lunch</option> 
    <option value="3">Dinner</option> 
    <option value="4">Snacks</option> 
    <option value="5">Dessert</option> 
</select> 

मैं कैसे मिलता है सभी मान (? एक सरणी) है कि उपयोगकर्ता जावास्क्रिप्ट में चयन किया है:

मैं इस प्रकार एक एचटीएमएल है?

उदाहरण के लिए, यदि उपयोगकर्ता ने लंच और स्नैक्स का चयन किया है, तो मुझे {2, 4} की एक सरणी चाहिए।

ऐसा लगता है कि यह एक बहुत ही आसान काम होना चाहिए लेकिन मुझे ऐसा नहीं लगता है।

धन्यवाद।

Answer 1

हमेशा की तरह:

var values = $('#select-meal-type').val(); 

docs से:

<select multiple="multiple"> तत्वों के मामले में, .val() विधि प्रत्येक चयनित विकल्प युक्त एक सरणी देता है ;

Answer 2

$('#select-meal-type :selected') में सभी चयनित आइटमों की एक श्रृंखला शामिल होगी।

$('#select-meal-type option:selected').each(function() { 
    alert($(this).val()); 
}); 

Answer 3

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

$('#select-meal-type').change(function(){ 
    var arr = $(this).val() 
}); 

डेमो

$('#select-meal-type').change(function(){ 
 
    var arr = $(this).val(); 
 
    console.log(arr) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select-meal-type" multiple="multiple"> 
 
    <option value="1">Breakfast</option> 
 
    <option value="2">Lunch</option> 
 
    <option value="3">Dinner</option> 
 
    <option value="4">Snacks</option> 
 
    <option value="5">Dessert</option> 
 
</select>

fiddle

Answer 4

यदि आप चाहते हैं कि आप प्रत्येक मान के बाद ब्रेक के साथ व्यक्त करते हैं;

$('#select-meal-type').change(function(){ 
    var meals = $(this).val(); 
    var selectedmeals = meals.join(", "); // there is a break after comma 

    alert (selectedmeals); // just for testing what will be printed 
}) 

Answer 5

जब तक एक सवाल JQuery के लिए पूछता है सवाल पहले मानक जावास्क्रिप्ट में उत्तर दिया जाना चाहिए के रूप में कई लोगों को अपनी साइटों में JQuery का उपयोग नहीं करते।

RobG How to get all selected values of a multiple select box using JavaScript? से:

function getSelectValues(select) { 
    var result = []; 
    var options = select && select.options; 
    var opt; 

    for (var i=0, iLen=options.length; i<iLen; i++) { 
    opt = options[i]; 

    if (opt.selected) { 
     result.push(opt.value || opt.text); 
    } 
    } 
    return result; 
} 

Answer 6

वास्तव में, मैं सबसे अच्छा, सबसे-संक्षिप्त, सबसे तेज, और सबसे संगत तरीका शुद्ध जावास्क्रिप्ट का उपयोग कर पाया (यह मानते हुए आप पूरी तरह से आईई LTE 8 का समर्थन की जरूरत नहीं है) पीछा कर रहा है:

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
}); 

अद्यतन (2017/02/14):

एक और भी अधिक संक्षिप्त तरीका ES6/ES2 का उपयोग कर 015 (ब्राउज़र इसका समर्थन के लिए):

const selected = document.querySelectorAll('#select-meal-type option:checked'); 
const values = Array.from(selected).map((el) => el.value); 

Answer 7

आप परिवर्तनों का जवाब की जरूरत है, तो आप इस कोशिश कर सकते हैं:

document.getElementById('select-meal-type').addEventListener('change', function(e) { 
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value)); 
}) 

[].slice.call(e.target.selectedOptions) की जरूरत है क्योंकि e.target.selectedOptions रिटर्न एक HTMLCollection, न कि एक Array । वह कॉल इसे Array में परिवर्तित कर देता है ताकि हम map फ़ंक्शन को लागू कर सकें, जो मान निकालें।

Answer 8

jQuery के बिना हर जगह काम करता है:

var getSelectValues = function (select) { 
    var ret = []; 

    // fast but not universally supported 
    if (select.selectedOptions != undefined) { 
     for (var i=0; i < select.selectedOptions.length; i++) { 
      ret.push(select.selectedOptions[i].value); 
     } 

    // compatible, but can be painfully slow 
    } else { 
     for (var i=0; i < select.options.length; i++) { 
      if (select.options[i].selected) { 
       ret.push(select.options[i].value); 
      } 
     } 
    } 
    return ret; 
};