jquery चुनिंदा परिवर्तन घटना को चयनित विकल्प मिलता है

Question

मैं इसके साथ अपने चुनिंदा तत्वों के परिवर्तन की घटना पर एक घटना को बाध्य करता हूं:

$('select').on('change', '', function (e) {

});

मैं उस तत्व को कैसे एक्सेस कर सकता हूं जो बदलाव की घटना होने पर चयनित हो गया?

Comments

तुमने यह क्यों कहा?

— मिगेल

@superuberduper जब तक मैं कर सकता था, लेकिन प्रतिरोध निरर्थक है मैं jquery से बचता था। आत्मसात करने के बाद आप बहुत बेहतर महसूस करेंगे।

— एडीजी

lolol @adg इतना अच्छा!

— SuperUberDuper

Answer 1

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

Comments

$ ("चयनकर्ता", यह) वाक्यविन्यास का क्या अर्थ है? मेरे पास एक सामान्य विचार है, लेकिन मैं पूरी तरह से निश्चित नहीं हूं

— जोशविक २०'१४ को

@JoshWillik आपके साथ $("selector", this)सभी selectorतत्वों को thisसंदर्भ के अंदर पा रहा है। लेखन $("selector", this)लगभग समान है $(this).find('selector')

— बेलश

@JoshWillik: के बाद $()से एक उपनाम है jQuery(), आप यहाँ प्रलेखन पा सकते हैं: api.jquery.com/jQuery हस्ताक्षर वहाँ स्पष्ट रूप से कहा गया है jQuery( selector [, context ] )। @ बेलाश: यदि यह "लगभग समान है", तो क्या अंतर है? या तेज क्या है? मैं पसंद करता हूं .find()क्योंकि यह अधिक ओओ आईएमओ है ...

— एड्रियन फोडर

एकाधिक चयन के मामले में कैसे जांचें?

— हेमंत_नेगी

@ AdrianFöder आपके और अन्य लोगों की तलाश में, .find()इस उत्तर के अनुसार लगभग 10% तेज है: stackoverflow.com/a/9046288/2767703

— केविन वैन मिर्लो

Answer 2

आप jQuery खोज विधि का उपयोग कर सकते हैं

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

उपरोक्त समाधान पूरी तरह से काम करता है, लेकिन मैं क्लिक किए गए विकल्प को प्राप्त करने के इच्छुक उनके लिए निम्न कोड जोड़ना चुनता हूं। यह तब भी आपको चयनित विकल्प प्राप्त करने की अनुमति देता है जब यह चयन मान नहीं बदला गया हो। (केवल मोज़िला के साथ परीक्षण किया गया)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

Comments

के लिए बाध्य optionघटनाओं एक जोखिम भरा प्रस्ताव, विशेष रूप से मोबाइल उपकरणों पर है। उदाहरण के लिए, वेबकिट इस घटना का सही ढंग से समर्थन नहीं करता है: bugs.chromium.org/p/chromium/issues/detail?id=5284

— इयान केम्प

अच्छा ठीक है! जैसा कि मैंने कहा, कई ब्राउज़र में दूसरा समाधान समर्थित नहीं है!

— बेलश

Answer 3

प्रत्यायोजित विकल्प

यदि कोई व्यक्ति अपने श्रोता के लिए प्रत्यायोजित दृष्टिकोण का उपयोग कर रहा है, तो उपयोग करें e.target(यह चुनिंदा तत्व को संदर्भित करेगा)।

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle डेमो

Comments

+1 क्योंकि यह वही है जो मैं चाहता हूं, लेकिन जब मैंने इसे स्थानीय रूप से आज़माया, तो यह काम नहीं कर रहा है। केवल jsfiddle पर काम करते हैं, मुझे क्या जोड़ना है?

— AVI

Answer 4

मुझे यह छोटा और साफ लगता है। इसके अलावा, यदि आप एक से अधिक हैं तो आप चयनित वस्तुओं के माध्यम से पुनरावृति कर सकते हैं;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

Comments

selectedOptionsसभी ब्राउज़रों में उपलब्ध नहीं है।

— बर्नहार्ड डब्लर

@ बर्नहार्डडब्लर कौन से हैं? कोई स्रोत?

— 1.44mb

मैंने आपका कोड IE 11 में कॉपी किया और एक त्रुटि मिली। मैं खत्म हो गया this.options[ this.options.selectedIndex ]। मोज़िला कहते हैं कि 26 से फ़ायरफ़ॉक्स द्वारा समर्थित है, कोई समर्थन नहीं।

— बर्नहार्ड डब्लर

Answer 5

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

पहले एक बनाएँ select option। उसके बाद उपयोग करने पर jqueryआप उपयोगकर्ता द्वारा मूल्य बदलने पर वर्तमान चयनित मूल्य प्राप्त कर सकते हैं select option।

Comments

क्या आप अपने उत्तर के बारे में अधिक विस्तार से बता सकते हैं?

— मोस्टाफिज

@MostafizurRahman मेरा कोड बहुत आसान है, इसलिए मैंने केवल कोड लिखा है।

Answer 6

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

Answer 7

चयनित मूल्य का मूल्य प्राप्त करने का एक और छोटा तरीका है,

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

Comments

अगर यह मामला है, तो "var selectVal = $ (" # selectElement ") क्यों नहीं होगा। वैल ()"

— work

चुनिंदा तत्व पर उत्सर्जित होने वाली घटना के मामले में मूल्य हो रहा है। यदि आप ऐसा करते हैं तो परिवर्तनों का चयन करते समय मूल्य अपडेट नहीं किया जाएगा।

— कर सकते हैं

Answer 8

आधिकारिक एपीआई प्रलेखन देखें https://api.jquery.com/selected-selector/

यह अच्छा काम करता है:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

तथा

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

और अद्वितीय विकल्प के लिए आसान हो

var SelVal = $( "#idSelect option:selected" ).val();

Answer 9

आप चयनित विकल्प मान प्राप्त करने के लिए इस jquery चुनिंदा परिवर्तन घटना का उपयोग कर सकते हैं

डेमो के लिए

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
}); 

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>