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

Question

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

मेरे पास एक HTML इस प्रकार है:

<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} का एक सरणी चाहिए।

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

धन्यवाद।

Comments

संभव का चयन

संभव डुप्लिकेट कैसे jquery का उपयोग कर कई चुनिंदा बॉक्स मान प्राप्त करने के लिए?

— जेक

के संभावित डुप्लिकेट कैसे जावास्क्रिप्ट का उपयोग एक से अधिक का चयन करें बॉक्स के सभी चुने गए मानों पाने के लिए?

— 2540625

Answer 1

हमेशा की तरह:

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

से डॉक्स :

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

Comments

@ उद्घाटन: क्या मैं यह होने का दावा करता हूं?

— फेलिक्स क्लिंग

@FelixKling ने आपको अभी किसी को गुमराह किया है जो सीधे सीधे पूरे jQuery के काम को इसमें शामिल कर सकता है, इससे पहले कि वह महसूस करे कि उसे तब तक नहीं करना चाहिए जब तक कि उसे वास्तव में ज़रूरत न हो।

— आमिर अफरीदी

@AamirAfridi: प्रश्न को jQuery के साथ टैग किया गया है। लाइब्रेरी के साथ एक प्रश्न को टैग करने का आम तौर पर मतलब है कि ऑप उस लाइब्रेरी का उपयोग करता है और लाइब्रेरी के उपयोग के उत्तर देने का स्वागत है। क्या मैं आज jQuery के लिए एक वैकल्पिक तरीका Ina दरवाजा भी सुझाऊंगा? शायद। लेकिन यह सवाल 3 साल से अधिक पुराना है। अन्य उत्तर पर ओपी की टिप्पणी भी देखें: stackoverflow.com/questions/11821261/…

— फेलिक्स क्लिंग

तुम सही हो। यह समझ में आता है कि यदि प्रश्न jQuery के साथ टैग किया गया हो तो

— आमिर अफरीदी

Answer 2

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

RobG से जावास्क्रिप्ट का उपयोग करके कई चयनित बॉक्स के सभी चयनित मान कैसे प्राप्त करें? :

  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;
}

Comments

इसे jquery के साथ टैग किया गया है।

— काइल

हा, नहीं देखा कि: / अभी भी +1

— mw_21

किस बारे में selectedOptions? क्या यह क्रॉस-ब्राउज़र पर्याप्त नहीं है? Array.prototype.map.call(el.selectedOptions, function(x){ return x.value })

— टेनबिट्स

ध्यान दें कि जब कोई valueविशेषता नहीं है, तो opt.value= opt.text।

— दिसंबर को प्रात:

आखिरकार! वेनिला ... मेरा पसंदीदा स्वाद

— पपीरो

Answer 3

वास्तव में, मैंने शुद्ध जावास्क्रिप्ट का उपयोग करते हुए सबसे अच्छा, सबसे रसीला, सबसे तेज़ और सबसे-संगत तरीका पाया (यह मानते हुए कि आपको IE 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 / ES2015 (इसका समर्थन करने वाले ब्राउज़रों के लिए) का उपयोग करके एक और भी अधिक सफल तरीका:

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

Comments

वैकल्पिक रूप से, यदि आपके पास तत्व है:Array.from(element.querySelectorAll("option:checked"),e=>e.value);

— Someguyonympie

सिर्फ FYI करें, क्वेरीज़लेक्टरऑल का उपयोग करने की तुलना में चयनित ऑप्शन / विकल्प संग्रह का उपयोग करना तेज़ है।

— एडम लेगट

धन्यवाद @AdamLeggett उन लोगों के संदर्भ के लिए, जो नहीं जानते हैं, कि ऊपर कोई @ इस गुम्मट के कोड को बदल देगा Array.from(element.selectedOptions).map(v=>v.value);:।

— काइलफ़ारिस

यह होगा, लेकिन नीचे मेरा जवाब देखें - यह IE पर बिल्कुल काम नहीं करता है और क्रोम और फ़ायरफ़ॉक्स के कुछ पुराने संस्करणों में अजीब व्यवहार है। यदि आप प्रदर्शन की परवाह नहीं करते हैं, तो querySelectorAll या filtering element.options से काम पूरा हो जाता है। इसके अलावा, आप Array.from () का उपयोग करने के बजाय [] .map.call () कर सकते हैं, मुझे नहीं पता कि इससे प्रदर्शन पर क्या प्रभाव पड़ेगा लेकिन यह निश्चित रूप से नकारात्मक नहीं होगा।

— एडम लेगेट 21

इस्तेमाल किया checked यह मेरे लिए एक बहु चयन ड्रॉपडाउन पर काम करता है, लेकिन सभी ड्रॉप-डाउन के लिए भी काम करना चाहिए$(".multiple_select > option:checked").each(function(){ console.log(this.value) });

— जोविआना डायस

Answer 4

यदि आप आधुनिक तरीके से जाना चाहते हैं, तो आप यह कर सकते हैं:

const selectedOpts = [...field.options].filter((x) => x.selected);

...ऑपरेटर iterable नक्शे (HTMLOptionsCollection सरणी के लिए)।

यदि आप केवल मूल्यों में रुचि रखते हैं, तो आप एक map()कॉल जोड़ सकते हैं :

const selectedValues = [...field.options]
                     .filter((x) => x.selected)
                     .map((x)=>x.value);

Comments

यह उत्तर अधिक श्रेय का हकदार है। सही समाधान, धन्यवाद!

— सिल्वर रिंगवी

Answer 5

सबसे पहले, ऑब्जेक्ट को एरे में Array.fromबदलने के लिए उपयोग करें HTMLCollection।

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

Answer 6

$('#select-meal-type :selected') सभी चयनित वस्तुओं की एक सरणी होगी।

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

​

Answer 7

अपडेट अक्टूबर 2019

निम्नलिखित सभी आधुनिक ब्राउज़रों पर "स्टैंड-अलोन" बिना किसी निर्भरता या वाष्पोत्सर्जन के काम करना चाहिए।

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Answer 8

इसे इस्तेमाल करे:

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

बेला

Answer 9

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

$('#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 10

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

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फ़ंक्शन को लागू कर सकें , जो मानों को निकालते हैं।

Comments

अफसोस की बात है कि यह हर जगह काम नहीं करेगा, बाहर IE11 क्षेत्र चयनित नहीं है। हालांकि निम्नलिखित काम करता है:Array.prototype.slice.call(field.querySelectorAll(':checked'))

— जेम्सडेव

Answer 11

निम्नलिखित में से कुछ मेरी पसंद होगा:

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

यह छोटा है, आधुनिक ब्राउज़रों पर यह तेज़ है, और हमें परवाह नहीं है कि यह 1% मार्केट शेयर ब्राउज़र पर तेज़ है या नहीं।

ध्यान दें, चयनित लोगों ने लगभग 5 साल पहले से कुछ ब्राउज़रों के साथ व्यवहार किया है, इसलिए एक उपयोगकर्ता एजेंट सूँघ यहाँ से पूरी तरह से बाहर नहीं है।

Answer 12

आप उपयोग कर सकते हैं selectedOptions

var selectedValues = Array.from(document.getElementById('select-meal-type').selectedOptions).map(el=>el.value);
console.log(selectedValues);

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

Answer 13

हर जगह बिना 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;
};

Comments

selectedOptiongsIE में समर्थित नहीं है

— Dustin Poissant