JQuery का उपयोग करके कई चुनिंदा बॉक्स मान कैसे प्राप्त करें?


155

JQuery का उपयोग करके कई चुनिंदा बॉक्स मान कैसे प्राप्त करें?

जवाबों:



291

.val()बहु-चयन सूची पर फ़ंक्शन का उपयोग करने से चयनित मानों की एक सरणी वापस आ जाएगी:

var selectedValues = $('#multipleSelect').val();

और अपने HTML में:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
क्या होगा यदि आप Text 1मूल्य के बजाय प्राप्त करना चाहते हैं ? के .val()साथ बदलें .text()?
रज़ा अहमद

9
nullएक खाली सरणी के बजाए कुछ चयनित रिटर्न के साथ बहुविकल्पी ध्यान देने योग्य । इसका मतलब है कि यदि आप प्रोग्राम में चयनित मूल्य जोड़ रहे हैं , तो आपके पास इसे सही तरीके से प्राप्त करने के लिए बहुत कुछ करना है।
सिंह

धन्यवाद! JQuery के साथ एक तत्व से एक मूल्य प्राप्त करने के लिए बहुत सारे तरीके हैं कि यह अनिवार्य रूप से एक संघर्ष है जिस तरह से आप ढूंढ रहे हैं।
चार्ल्स वुड

5
@ आप शून्य मुद्दे के आसपास पाने के लिए एक coalesc जोड़ सकते हैं जैसे var selectedValues = $('#multipleSelect').val() || []; कि यह भी ध्यान देने योग्य है कि यह स्ट्रिंग की एक सरणी देता है। मैं एक पूर्णांक से तुलना कर रहा था और कोई मेल नहीं मिल रहा था, इसलिए मैंने एक जोड़ा .toString()
tkerwood

16

तुम भी जेएस नक्शा समारोह का उपयोग कर सकते हैं:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

और तब आप optionतत्व की कोई भी संपत्ति प्राप्त कर सकते हैं :

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
महान उत्तर, लेकिन elहर एक विकल्प के लिए jQuery वस्तु के रूप में रैपिंग के अतिरिक्त खर्च का भुगतान करने की आवश्यकता नहीं है । जब यह बहुत अजीब न हो, तो बस DOM से सीधे चलें। आप $(el).val()बस बदल सकते हैं el.value। बेशक अगर आप jQuery के लिए उपयोग किए जाते हैं या अपने अन्य उदाहरणों की तरह डेटा या विशेषताओं को हथियाना चाहते हैं, तो jQuery किसी को भी नुकसान नहीं पहुंचा रहा है।
काइलमिट

1
@KyleMit बढ़िया टिप। बस इस दृष्टिकोण का उपयोग छिपे हुए क्षेत्र मूल्यों के संग्रह को हथियाने के लिए किया और इसने पूरी तरह से काम किया।
EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

फिर भी इस समस्या के लिए एक और दृष्टिकोण। चयनित सरणी में विकल्प मान के रूप में अनुक्रमित होंगे और प्रत्येक सरणी आइटम में पाठ का मान होगा।

उदाहरण के लिए

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

यदि विकल्प 1 और 2 का चयन किया जाता है।

चयनित सरणी होगी:

selected['abc']=1; 
selected['def']=2.

5

बस एक लाइन से-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

आउटपुट: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

आउटपुट: ["value1", "value2"]

यदि आप .join () का उपयोग करते हैं

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

आउटपुट: टेक्स्ट 1, टेक्स्ट 2, टेक्स्ट 3


4

HTML कोड:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery कोड:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

मुझे भरोसा है ये काम करेगा


14
"उम्मीद है कि यह काम करता है" मत करो, अगर आपको यकीन नहीं है कि अगर यह जवाब है, तो इसका परीक्षण करें और सुनिश्चित करें!
स्टर्लिंग आर्चर

6
अगर आपको जवाब पक्का नहीं है तो पोस्ट ना करें .. !! हम यहाँ उम्मीदों के लिए नहीं हैं .. !! LOL
क्लेन Dililva

3
अरे दोस्त। यह पूरी तरह से काम करता है। इसकी जांच - पड़ताल करें। आपको इसकी उम्मीद करनी चाहिए।
अप्रासंगिक

2
यह jQuery का एक अक्षम्य उपयोग है। बेहतर तरीका यह है कि इस तरह एक आईडी चयनकर्ता के साथ प्रस्तावना करें: $('#multiple').find(':selected')@Prabhagaran
can_mutably_borrow

@YounisShah मैं शायद ही इसे "अक्षम" कहूंगा क्योंकि समय अंतर सापेक्षता कुछ भी नहीं है ...
NorCalKnockOut

0

अल्पविराम विभाजक में चयनित मान प्राप्त करें

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.