jQuery ड्रॉपडाउन से चयनित विकल्प प्राप्त करें

1127

आमतौर पर मैं $("#id").val()चयनित विकल्प के मूल्य को वापस करने के लिए उपयोग करता हूं , लेकिन इस बार यह काम नहीं करता है। चयनित टैग में आईडी हैaioConceptName

HTML कोड

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
javascript  jquery  html 
— विलियम कीनन
स्रोत
2
क्या आप तत्व का मार्कअप दिखा सकते हैं#aioConceptName
— जोर्ज
2
यह अजीब है क्योंकि इस उदाहरण पर काम करता है jsfiddle.net/pAtVP , क्या आप सुनिश्चित हैं कि यह घटना आपके पर्यावरण में आग लगाती है?
— जॉर्ज
5
— केनी लिंस्की
11
एक देर से सोचा, लेकिन .val () तब तक काम नहीं करेगा जब तक आप valueउन <option>एस पर विशेषता सेट नहीं करते हैं , ठीक है?
— याकूब वेलेंटा
8
JQuery के हाल के संस्करणों (1.9.1 के साथ परीक्षण) में इस मार्कअप के साथ कोई समस्या नहीं है। उपरोक्त उदाहरण के लिए, $("#aioConceptName").val()रिटर्न choose io।
— सलमान एक

जवाबों:

1844

ड्रॉपडाउन विकल्पों के लिए आप शायद कुछ इस तरह चाहते हैं:

var conceptName = $('#aioConceptName').find(":selected").text();

कारण val()चाल नहीं करता है क्योंकि एक विकल्प पर क्लिक लटकती का मूल्य बदल नहीं करता है - यह सिर्फ कहते हैं :selectedचयनित विकल्प है जो एक है करने के लिए संपत्ति बच्चे लटकती की।

— इलियट बोनेविले
स्रोत
41
आह, ठीक है, आपने HTML के साथ अपना प्रश्न अपडेट किया है। यह उत्तर अब अप्रासंगिक है। तथ्य की बात के रूप .val()में, आपके मामले में काम करना चाहिए - आपके पास कहीं और त्रुटि होनी चाहिए।
— इलियट बोनेविले
13
val()उपयोग के लिए क्यों नहीं var conceptVal = $("#aioConceptName option").filter(":selected").val();?
— परीक्षक
61
कैसे एक सरल के बारे में var conceptVal = $("#aioConceptName option:selected").val()?
— क्लेमेन तुषार
5
मुझे अभी भी यह चयन करने में मदद करने के लिए उपयोगी पाया गया है कि मैंने पहले से ड्रॉपडाउन प्राप्त किया है - उदाहरण के लिए, जैसे var mySelect = $('#mySelect'); / * ... अधिक कोड होता है ... * / var selectedText = mySelect.find(':selected').text();
— चार्ल्स वुड
18
वास्तव में इसका कारण .val () उसके लिए काम नहीं कर रहा है क्योंकि उसने वास्तव में अपने विकल्पों को एक मूल्य नहीं दिया है, यही वजह है कि उसे चयनित पाठ को पुनः प्राप्त करने के लिए आपके तरीके का उपयोग करना पड़ता है, इसलिए एक और फिक्स को बदलना होगा <विकल्प> io चुनें </ विकल्प> से <विकल्प मान = 'चुनें io'> चुनें io </ विकल्प> हालांकि आपका समाधान संभवत: जल्दी और अधिक व्यावहारिक है, मुझे लगा कि मैं इस रास्ते को बताऊंगा ताकि उसे बेहतर समझ हो क्यों यह उसके लिए काम नहीं कर रहा था।
— जॉर्डन LaPrise
342

प्रत्येक विकल्प के लिए मान सेट करें

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()काम नहीं किया क्योंकि विशेषता .val()देता है value। इसे ठीक से काम करने के लिए, valueविशेषताओं को प्रत्येक पर सेट किया जाना चाहिए <option>।

अब आप दूसरों के द्वारा सुझाए जा रहे $('#aioConceptName').val()इस सभी :selectedवूडू के बजाय कॉल कर सकते हैं।

— जैकब वेलेंटा
स्रोत
11
कैविएट: यदि कोई विकल्प नहीं चुना गया है, तो $('#aioConceptName').val()अशक्त / "अपरिभाषित" लौटाया जाता है
— गॉर्डन
इसने मुझे आश्वासन दिया कि $ ('# माईसेलेक्ट')। वैल () सही था मैं सिलेक्ट करना चाहता था कि मैं एक आईडी दे दूं!
— zzapper
4
मेरा एक चुनिंदा विकल्प एक विशेष promptविकल्प है <option>Please select an option</option>। मेरे मामले में यह एक रिक्त मान विशेषता जोड़ने के लिए कोई समस्या नहीं थी, <option value="">Please...</option>लेकिन मेरा मानना ​​है कि कुछ मामलों में मान विशेषता नहीं होने से समझ में आता है। लेकिन +1 क्योंकि आपके वोडू शब्द ने मुझे मुस्कुरा दिया।
— सिरिल डचोन-डोरिस
अंदर पाठ val()के valueबजाय का चयन नहीं है option? यानी इसके 1बजाय इसका चयन करता है roma।
— मृत्युभोज
4
@deathlock वह संपूर्ण बिंदु है .val()। यदि आप पाठ में हेरफेर करना चाहते हैं / उपयोग करना चाहते हैं, $(":selected).text()तो मूल्य और पाठ को समान होने के लिए उपयोग या सेट करें।
— याकूब वेलेंटा
162

मैं इस सवाल पर अड़ गया और इलियट बोनेविले के उत्तर के अधिक संक्षिप्त संस्करण को विकसित किया:

var conceptName = $('#aioConceptName :selected').text();

या उदारता से:

$('#id :pseudoclass')

यह आपको एक अतिरिक्त jQuery कॉल बचाता है, एक शॉट में सब कुछ का चयन करता है, और अधिक स्पष्ट (मेरी राय) है।

— एड ओरसी
स्रोत
1
@JohnConde मेटा पर स्वीकृत उत्तर आपके साथ असहमत है: meta.stackexchange.com/questions/87678/… । मेरी राय में, एड ने एक अच्छा जवाब दिया है और बस कुछ अतिरिक्त संदर्भ प्रदान किए हैं।
— इसका नोर्बर
वे इसे अनुमति दे सकते हैं लेकिन यह अभी भी एक बुरा संसाधन है
— जॉन कॉनडे
1
W3schools लिंक को हटा दिया गया, यह कड़ाई से आवश्यक नहीं था और "jQuery pseduo वर्गों" के लिए एक Google खोज बहुत सारी जानकारी प्रदान करती है।
— एड Orsi
@EdOrsi: जबकि यह एक अतिरिक्त jQuery कॉल बचाता है, यह देशी DOM querySelectorAll()विधि द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ लेने से रोकता है ( jQuery डॉक्स देखें )। तो, यह एलियट के समाधान की तुलना में धीमा होना चाहिए ।
— अलेक्जेंडर अबाकुमोव
मैं शायद .find(':selected')इसका उपयोग करने का पक्ष लूंगा , तो यह आपको एक घटना से जुड़ी कॉलबैक से कॉल करने की अनुमति देगा ... जैसे$('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); });
— आर्मस्ट्रांगेस्ट
58

मूल्य के लिए यह प्रयास करें ...

$("select#id_of_select_element option").filter(":selected").val();

या पाठ के लिए यह ...

$("select#id_of_select_element option").filter(":selected").text();
— व्लादिमीर ज्यूरिक
स्रोत
49

यदि आप घटना संदर्भ में हैं, तो jQuery में, आप चयनित विकल्प तत्व का उपयोग करके पुनः प्राप्त कर सकते हैं:
$(this).find('option:selected')इस तरह:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

संपादित करें

जैसा कि पॉससविथिन ने उल्लेख किया है , मेरा जवाब सिर्फ सवाल का जवाब है: चयनित "विकल्प" का चयन कैसे करें।

अगला, विकल्प मान प्राप्त करने के लिए, उपयोग करें option.val()।

— JoDev
स्रोत
2
दोषरहित! बस यह मत भूलो कि आपको $(this).find('option:selected').val()विकल्प तत्व का मूल्य प्राप्त करने के लिए, या $(this).find('option:selected').text()पाठ प्राप्त करने के लिए अंत में जोड़ना चाहिए । :)
— डिएगो फोर्ट्स
16

चयन का मान (पाठ नहीं) पढ़ना:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

कैसे एक चयन को निष्क्रिय करने के लिए? दोनों प्रकारों में, मान का उपयोग करके बदला जा सकता है:

ए

उपयोगकर्ता ड्रॉपडाउन के साथ बातचीत नहीं कर सकता। और वह नहीं जानता कि क्या अन्य विकल्प मौजूद हो सकते हैं।

$('#Status').prop('disabled', true);

बी

उपयोगकर्ता ड्रॉपडाउन में विकल्प देख सकते हैं लेकिन उनमें से सभी अक्षम हैं:

$('#Status option').attr('disabled', true);

इस स्थिति में, $("#Status").val() केवल jQuery के संस्करणों की तुलना में छोटा काम करेगा1.9.0 । अन्य सभी वेरिएंट काम करेंगे।

विकलांग चयन का अद्यतन कैसे करें?

पीछे के कोड से आप अभी भी अपने चयन में मूल्य को अपडेट कर सकते हैं। यह केवल उपयोगकर्ताओं के लिए अक्षम है:

$("#Status").val(2);

कुछ मामलों में आपको घटनाओं को आग लगाने की आवश्यकता हो सकती है:

$("#Status").val(2).change();
— profimedica
स्रोत
11 
<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>
— ओल सेन
स्रोत
:) अच्छी बात यह है :selected.. वैल () या टेक्स्ट () कई चुनिंदा विकल्पों पर सही काम नहीं कर रहा है, केवल अगर कुछ सरणी का उत्पादन किया जाता है जैसे कि map()वह कर सकता है।
— ओल सेन
10

आपको इस सिंटैक्स का उपयोग करना चाहिए:

var value = $('#Id :selected').val();

तो इस कोड की कोशिश करें:

var values = $('#aioConceptName :selected').val();

आप फिडल में परीक्षण कर सकते हैं: http://jsfiddle.net/PJT6r/9/

इस उत्तर के बारे में इस पोस्ट में देखें

— DLMAN
स्रोत
9

JQuery का उपयोग करते हुए, बस एक changeईवेंट जोड़ें और उस हैंडलर के भीतर चयनित मान या पाठ प्राप्त करें।

यदि आपको चयनित पाठ की आवश्यकता है, तो कृपया इस कोड का उपयोग करें:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

या यदि आपको चयनित मान की आवश्यकता है, तो कृपया इस कोड का उपयोग करें:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
— sanman
स्रोत
9

jQuery.val()चुनिंदा तत्वों के लिए फ़ंक्शन का उपयोग करें :

.Val () विधि का उपयोग मुख्य रूप से इनपुट, चयन और टेक्सारिया जैसे फार्म तत्वों के मूल्यों को प्राप्त करने के लिए किया जाता है। चुनिंदा तत्वों के मामले में, यह nullतब लौटता है जब कोई विकल्प नहीं चुना जाता है और एक सरणी जिसमें प्रत्येक चयनित विकल्प का मूल्य होता है जब कम से कम एक होता है और multipleविशेषता का मौजूद होने के कारण अधिक चयन करना संभव होता है।

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>
स्निपेट का विस्तार करें

— सलमान ए
स्रोत
8

जो किसी को पता चला कि सबसे अच्छा जवाब काम नहीं करता है।

उपयोग करने का प्रयास करें:

  $( "#aioConceptName option:selected" ).attr("value");

हाल की परियोजनाओं में मेरे लिए काम करता है इसलिए इस पर ध्यान देने योग्य है।

— user2709153
स्रोत
7

बस यह काम करना चाहिए:

var conceptName = $('#aioConceptName').val();
— d.popov
स्रोत
6

सीधे आगे और बहुत आसान:

आपका ड्रॉपडाउन

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

चयनित मान प्राप्त करने के लिए Jquery कोड

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});
— जुआन जे
स्रोत
4

आप इसे इस तरह डीबग करने का प्रयास कर सकते हैं:

console.log($('#aioConceptName option:selected').val())
— swathi
स्रोत
4

प्राप्त के लिए मूल्य टैग के चयनित: 

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

और यदि आप पाठ को इस कोड का उपयोग करना चाहते हैं :

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

उदाहरण के लिए:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
— mamal
स्रोत
2

यदि आप पाठ नोड के बजाय 'मान' विशेषता को हथियाना चाहते हैं, तो यह आपके लिए काम करेगा:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
— Drodarious
स्रोत
यह केवल आंशिक रूप से एक समाधान है - यह भी प्रत्येक विकल्प के लिए मूल्य निर्धारित करने के लिए आवश्यक है - यह पहले से ही याकूब वालेटा के उत्तर द्वारा कवर किया गया है
— डेविड
2

इसके लिए प्रयास करें

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
— हारिस सुल्तान
स्रोत
2 
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

इंडेक्स के साथ एक सरणी के रूप में DDL की कल्पना करें, आप एक इंडेक्स का चयन कर रहे हैं। वह चुनें जिसे आप अपने जेएस के साथ सेट करना चाहते हैं।

— Satista
स्रोत
2

मुझे उम्मीद है कि यह भी बेहतर समझने में मदद करता है और नीचे इस कोशिश में मदद करता है,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

करने के लिए और अधिक जानकारी के लिए कृपया http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

— Vijayaragavan
स्रोत
1

चयन करने के लिए समान श्रेणी = नाम के साथ आप ऐसा कर सकते हैं, यह जांचने के लिए कि क्या कोई चयन विकल्प चुना गया है।

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
— बल्दौ मीडिया
स्रोत
1

मेरे पास एक ही मुद्दा था और मुझे पता चला कि यह मेरे मामले पर काम क्यों नहीं कर रहा है
। html पृष्ठ को अलग-अलग html टुकड़ों में विभाजित किया गया था और मैंने पाया कि मेरे पास एक और इनपुट फ़ील्ड है जो उसी आईडी का उपयोग करता है select, जिसके कारण val()हमेशा खाली होना चाहिए
मुझे आशा है कि यह किसी ऐसे मुद्दे के लिए दिन बचाता है।

— हस्ना इब्राहीम
स्रोत
दरअसल, इसने मुझे मेरी समस्या के लिए जगा दिया। मैं खुद डेटा-टारगेट में क्यूटी-फील्ड का उपयोग कर रहा था और आईडी में ही .. क्यूटी_फील्ड। हमेशा मूल बातें दो या अधिक बार जांचें।
— cdsaenz
1

$ ("# आईडी") का उपयोग करने के लिए। वैल, आपको इस तरह के विकल्प के लिए एक मूल्य जोड़ना चाहिए:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

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

   $("#aioConceptName").find(':selected').text();

काश कि मदद मिलती ।।

— यूसुफ अज़ान
स्रोत
1

यहाँ इस मुद्दे का सरल समाधान है। 

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });
— संजय
स्रोत
1
var selectedaioConceptName = $('#aioConceptName option:selected').val();है उपयोग की तुलना में बेहतर एक और खोज ()
— Sadee
0

संभवतः इस तरह के परिदृश्य के साथ आपका सबसे अच्छा दांव वर्तमान में चयनित मूल्य को खोजने के लिए jQuery की परिवर्तन विधि का उपयोग करना है, जैसे:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

मैं इस पद्धति को पसंद करता हूं क्योंकि आप किसी चयनित क्षेत्र में प्रत्येक चयनित विकल्प के लिए कार्य कर सकते हैं।

उम्मीद है की वो मदद करदे!

— वर्नर ज़ेबर्ड बेज़िंगर
स्रोत
0

आमतौर पर आपको न केवल चयनित मान प्राप्त करना होगा, बल्कि कुछ कार्रवाई भी करनी होगी। तो क्यों नहीं सभी jQuery के जादू से बचने और कार्रवाई कॉल के लिए एक तर्क के रूप में चयनित मूल्य को पास करें?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
— रोलाण्ड
स्रोत
0

आप सटीक चयनित विकल्प का उपयोग करके चयन कर सकते हैं: नीचे इनरटेक्स्ट दिया जाएगा

$("select#aioConceptName > option:selected").text()

जबकि नीचे आप मूल्य देंगे। 

$("select#aioConceptName > option:selected").val()
— हाफिज शहबाज अली
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.