JQuery का उपयोग करके चयन के सभी विकल्प कैसे प्राप्त करें?

Question

मैं अपनी आईडी पर पास होकर jQuery के माध्यम से चयन के सभी विकल्प कैसे प्राप्त कर सकता हूं?

मैं केवल उनके मूल्यों को पाने के लिए देख रहा हूं, पाठ को नहीं।

Answer 1

उपयोग:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | jQuery एपीआई प्रलेखन

Comments

जावास्क्रिप्ट कार्यों में से किसी को भी jQuery की आवश्यकता नहीं है। jQuery के संचालन को आसान बनाने के लिए jQuery पसंद का विषय है।

— खंडहर

आप यह भी कर सकते हैं: $ ("# आईडी विकल्प")। प्रत्येक (फ़ंक्शन (नाम, वैल) {var opt = val.text;});

— कोफीफस

$.mapबहुत अधिक सुरुचिपूर्ण और कम त्रुटि प्रवण है (नीचे देखें)।

— इलियट कैमरन

$('#id option').map((index, option) => option.value): ध्यान दें कि "वेनिला" जेएस mapफ़ंक्शन ( (item, index) =>) की तुलना में कॉलबैक हस्ताक्षर कैसे उलट दिया जाता है

— 06:01 बजे

Answer 2

मुझे jQuery का पता नहीं है, लेकिन मुझे पता है कि यदि आपको चयनित तत्व मिलता है, तो इसमें एक 'विकल्प' ऑब्जेक्ट होता है।

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

Comments

+1। उन चीजों के लिए jQuery के जटिल चयनकर्ता जादू का सहारा न लें, जिनके पास पहले से ही सादे पुराने डोम में काफी कुशल कार्यान्वयन हैं।

— bobince

क्यों नहीं, @bobince? यदि आप ज्यादातर jQuery का उपयोग करते हैं, तो यह दोनों को लिखे जाने वाले कम कोड के साथ जल्दी होता है, और कोशिश नहीं करने के लिए और यह पता लगाने के लिए कि क्या आपको इस उदाहरण में नियमित जावास्क्रिप्ट पर स्विच करना चाहिए। और आपका कोड अधिक सुसंगत है।

— एंड्रयू

Answer 3

$.map शायद ऐसा करने का सबसे कारगर तरीका है।

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

$('#selectBox option:selected')यदि आप केवल वही चुन सकते हैं जो आप चुन सकते हैं ।

पहली पंक्ति सभी चेकबॉक्स का चयन करती है और उनके jQuery तत्व को एक चर में डालती है। हम तब .mapjQuery के फ़ंक्शन का उपयोग उस चर के तत्वों में से प्रत्येक के लिए एक फ़ंक्शन लागू करने के लिए करते हैं; हम जो कुछ कर रहे हैं, वह प्रत्येक तत्व के मूल्य को वापस कर रहा है क्योंकि हम इसकी परवाह करते हैं। क्योंकि हम उन्हें मानचित्र फ़ंक्शन के अंदर वापस कर रहे हैं, यह वास्तव में अनुरोध किए गए मानों की एक सरणी बनाता है।

Comments

यह सबसे सुरुचिपूर्ण समाधान IMO है। मानचित्र एक बहुत शक्तिशाली निर्माण है जो इस स्थिति के बिल्कुल अनुकूल है।

— हैदरगढ़

मैं वास्तव में आपके समाधान को पसंद करता हूं - यह वह दृष्टिकोण है जिसके साथ मैं गया था। हालाँकि, यदि आप केवल चयनित मान चाहते हैं तो यह और भी तुच्छ है: $('#selectBox').val()चयनित मानों की एक सरणी लौटाएगा।

— whoisthemachine

नमस्ते, @Pasagrande मेरे पास एक कस्टम विशेषता नाम 'डेटा-प्रकार' है। मैं आपके समाधान का उपयोग करके इसका मूल्य कैसे प्राप्त कर सकता हूं? मैं जो कर रहा हूं वह 'विकल्प.डॉट-टाइप' है, लेकिन यह मुझे एनएएन दे रहा है। अग्रिम में धन्यवाद।

— Me_developer

नमस्ते, @Pasagrande मुझे '$ (विकल्प, यह) .attr ("डेटा-प्रकार") करके मुझे जो चाहिए था। लेकिन अगर आपके पास कुछ बेहतर है तो मुझे बताएं। धन्यवाद। :)

— Me_developer

मुझे लगता है कि आप सिर्फ 'वापसी विकल्प' कर सकते हैं। डेटा ("डेटा-प्रकार");) नक्शे में। आपको डेटा-प्रकारों के मूल्यों की एक सरणी देनी चाहिए।

— PCasagrande

Answer 4

कुछ उत्तर का उपयोग करता है each, लेकिन mapयहाँ एक बेहतर विकल्प है IMHO:

$("select#example option").map(function() {return $(this).val();}).get();

mapJQuery में (कम से कम) दो कार्य हैं। थॉमस पीटरसन का उत्तर "उपयोगिताएँ / jQuery.map" का उपयोग करता है; यह उत्तर "ट्रैवर्सिंग / मैप" (और इसलिए थोड़ा क्लीनर कोड) का उपयोग करता है।

यह इस बात पर निर्भर करता है कि आप मूल्यों के साथ क्या करने जा रहे हैं। यदि आप, मान लें कि, किसी फ़ंक्शन से मान वापस करना चाहते हैं, mapतो शायद बेहतर विकल्प है। लेकिन अगर आप सीधे उन मूल्यों का उपयोग करने जा रहे हैं जो आप चाहते हैं each।

Comments

आप वास्तव में $ (इस) .val () के बजाय इस का उपयोग कर सकते हैं। प्रारंभिक चयनकर्ता (# विकल्प) में बच्चों को ढूंढकर आपको बेहतर सेवा दी जाएगी। हालांकि अंत में प्राप्त () के साथ अच्छा कठिन है।

— एलेक्स बैरेट

@ एलेक्स बैरेट: ठीक है, यह संभव है कि jQuery का उपयोग किए बिना इस समस्या को हल किया जाए। तर्क के रूप में एक तत्व के साथ jQuery को कॉल करना, बस तत्व को एक jQuery ऑब्जेक्ट (यानी कोई ट्री ट्रैवर्सिंग, यानी इतना महंगा नहीं) में लपेट देगा। तो शायद एक माइक्रो-अनुकूलन के रूप में, हाँ।

— cic

नक्शा FTW। ठीक ऐसा ही होना चाहिए। अंत में प्राप्त () अनावश्यक प्रतीत होता है, हालांकि (जो DOM नोड लौटाता है, और val () पहले से ही हमें एक स्ट्रिंग देता है, इसलिए ...) var opts = $ ('# cm_amt विकल्प')। map (फंक्शन) ) {वापसी parseInt ($ (यह) .val ());});

— 15

@sbeam: "जैसा कि रिटर्न वैल्यू एक jQuery लिपटे हुए सरणी है, यह get()एक मूल सरणी के साथ काम करने के लिए लौटी हुई वस्तु के लिए बहुत सामान्य है ।" - api.jquery.com/map

— cic

इससे मुझे बहुत मदद मिली, मैं चाहता था कि पाठ का मूल्य नहीं था, इसलिए मैं text()इसके बजाय बदल गया val()। धन्यवाद ! (मैं आपको 1000 से अधिक जाने का कारण बना ;->)

— ParPar

Answer 5

$('select#id').find('option').each(function() {
    alert($(this).val());
});

Comments

यह टिकट है, क्योंकि मुझे चयनकर्ता का उपयोग करने के बजाय तत्वों को init पर चर में कैशे करना पसंद है।

— डग बियर्ड

इसके अलावा $ के साथ काम करता है (यह) (जो देख रहा था) उदाहरण के लिए,

— ह्यूग सीग्रेव्स

Answer 6

$("#id option").each(function()
{
    $(this).prop('selected', true);
});

यद्यपि, सही तरीका तत्व की DOM प्रॉपर्टी को सेट करना है, जैसे:

$("#id option").each(function(){
    $(this).attr('selected', true);
});

Comments

यह नहीं होगा .attr ('चयनित', 'चयनित')?

— v010dya

Answer 7

यह #myselectboxआप के लिए एक अच्छा साफ सरणी में विकल्प मूल्यों डाल देंगे:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});

Comments

आप इसे छोटा कर सकते हैं:$.map(domelts, elt=> $(elt).val())

— जोनो_एफटीडब्ल्यू

Answer 8

आप अपने सभी "चयनित मूल्यों" को चेकबॉक्स के नाम से ले सकते हैं और उन्हें "," द्वारा अलग किए गए स्टिंग में प्रस्तुत कर सकते हैं।

ऐसा करने का एक अच्छा तरीका jQuery के $ .map () का उपयोग करना है:

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);

Comments

यह कोड बहुत ही अपठनीय है, मैं कभी भी इसका उपयोग नहीं करूंगा, भले ही इसके थोड़े शांत हों।

— क्लिक करें

यह भी सवाल चेकबॉक्स के बारे में है selectऔर optionनहीं।

— देहाती

Answer 9

काम करने का उदाहरण

इसका उपयोग करने का सबसे कारगर तरीका है $.map()

उदाहरण:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});

Answer 10

आप उसके लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});

Answer 11

बहुविकल्पी विकल्प के लिए:

$('#test').val()चयनित मूल्यों की सूची। $('#test option').lengthकुल विकल्पों की संख्या (दोनों चयनित और चयनित नहीं)

Answer 12

यह jQuery के साथ एक सरल स्क्रिप्ट है:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 13

चयनित आइटम के सभी मूल्यों, ग्रंथों या मूल्य, या चयनित आइटम के पाठ को प्राप्त करने के लिए jquery में एक सरल उदाहरण है

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

Answer 14

$("input[type=checkbox][checked]").serializeArray();

या:

$(".some_class[type=checkbox][checked]").serializeArray();

परिणाम देखने के लिए:

alert($("input[type=checkbox][checked]").serializeArray().toSource());

Answer 15

यदि आप कुछ चयनित पाठ के साथ सभी विकल्पों की तलाश कर रहे हैं तो नीचे दिया गया कोड काम करेगा।

$('#test').find("select option:contains('B')").filter(":selected");

Answer 16

छोटा रास्ता

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

या

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}