<Select> विकल्पों के माध्यम से Iterate करें

202

मेरे पास <select>HTML में एक तत्व है। यह तत्व ड्रॉप डाउन सूची का प्रतिनिधित्व करता है। मैं यह समझने की कोशिश कर रहा हूं कि <select>JQuery के माध्यम से तत्व में विकल्पों के माध्यम से पुनरावृति कैसे करें ।

मैं एक <select>तत्व में प्रत्येक विकल्प के मूल्य और पाठ को प्रदर्शित करने के लिए JQuery का उपयोग कैसे करूं ? मैं उन्हें केवल एक alert()बॉक्स में प्रदर्शित करना चाहता हूं ।

jquery

— user208662
स्रोत

346

$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});

— karim79
स्रोत

2

यह अजीब है, यह काम करना चाहिए लेकिन किसी कारण से यह मेरे लिए नहीं है ... :(

— SublymeRick

14

यह इसके बजाय $ (यह) .val () होना चाहिए। जैसा कि IT ppl ने कहा है।

— थिहरा

केवल IT ppl के जवाब ने मेरे लिए काम किया (और यह सिर्फ "यह" नहीं था)

— user984003

1

यह क्रमशः मूल्य और पाठ पाने के लिए $ (यह) .val () और $ (यह) .text () होना चाहिए

— अमित भगत

5

@AmitKB - पाठ और मूल्यों को निकालने के लिए देशी डोम विधि का उपयोग करना बेहतर है। 1) यह छोटा है 2) दो नए jQuery वस्तुओं के निर्माण से बचा जाता है।

— करीम k३

79

इसने मेरे लिए काम किया

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});

— आईटी पीपीएल
स्रोत

5

यदि आप $(this)एक चर में संग्रहीत करते हैं , तो यह अधिक कुशल होगा, अर्थातvar $this = $(this); $this.text(); $this.val();...etc.

— लियाम

25

सूचकांक और तत्व के साथ प्रत्येक का उपयोग कर सकते हैं।

$('#selectIntegrationConf').find('option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

// यह भी काम करेगा

$('#selectIntegrationConf option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

— अरुण प्रताप सिंह
स्रोत

17

और अनुयायियों के लिए अपेक्षित, गैर- jquery तरीका, क्योंकि Google लगता है कि सभी को यहाँ भेजते हैं:

  var select = document.getElementById("select_id");
  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    // now have option.text, option.value
  }

— rogerdpack
स्रोत

4

आप भी इस तरह की कोशिश कर सकते हैं।

आपका HTMLकोड

<select id="mySelectionBox">
    <option value="hello">Foo</option>
    <option value="hello1">Foo1</option>
    <option value="hello2">Foo2</option>
    <option value="hello3">Foo3</option>
</select>

आप JQueryकोड

$("#mySelectionBox option").each(function() {
    alert(this.text + ' ' + this.value);
});

या

var select =  $('#mySelectionBox')[0];

  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    alert (option.text + ' ' + option.value);
  }

— दुलिथ दे कोस्टा
स्रोत

1

$.each($("#MySelect option"), function(){
                    alert($(this).text() + " - " + $(this).val());                    
                });

— योजना अम्बावकर
स्रोत

1

यदि आप Jquery नहीं चाहते (और ES6 का उपयोग कर सकते हैं)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}

— जेको कैइडो
स्रोत

कोड केवल उत्तर हतोत्साहित करते हैं। कृपया कुछ स्पष्टीकरण जोड़ें कि यह समस्या को कैसे हल करता है, या यह मौजूदा उत्तरों से कैसे भिन्न है। समीक्षा से

— निक

1

JQuery के बिना पहले से प्रस्तावित उत्तरों पर एक और भिन्नता।

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))

— zzart
स्रोत