ट्रिगर परिवर्तन घटना <jquery का उपयोग कर का चयन करें


146

वैसे भी मैं पेज लोड पर चुनिंदा बॉक्स पर एक परिवर्तन घटना को ट्रिगर कर सकता हूं और एक विशेष विकल्प का चयन कर सकता हूं।

साथ ही फ़ंक्शन को इवेंट में बाइंड करने के बाद ट्रिगर जोड़कर निष्पादित फ़ंक्शन।

मैं इस तरह से कुछ उत्पादन करने की कोशिश कर रहा था

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/


क्या आप लोड पर एक विशेष विकल्प सेट करना चाहते हैं? या आप अपनी परिवर्तन घटना को ट्रिगर करना चाहते हैं?
Manse

क्या आप अंतिम समाधान पर विस्तार कर सकते हैं। जब पृष्ठ लोड होता है, या जब कोई विशिष्ट चीज़ चुन ली जाती है, तो क्या आप एक विकल्प का चयन करने के लिए मजबूर होते हैं?
मैथ्यू रिचर्स

नमस्ते, आपकी प्रतिक्रिया के लिए धन्यवाद मैं समस्या को हल करने में सक्षम था और इसे प्रलेखित किया है।
किशनियो

जवाबों:


289

मानval() को बदलने के लिए उपयोग करें (पाठ नहीं) और मैन्युअल रूप से घटना को फायर करने के लिए।trigger()

परिवर्तन इवेंट हैंडलर को ट्रिगर से पहले घोषित किया जाना चाहिए।

यहाँ एक नमूना है

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

विकल्प बदलने के बाद भी मैं परिवर्तन ईवेंट फ़ंक्शन को निष्पादित करना चाहता था। WRT इस । चेतावनी बॉक्स को निष्पादित करना चाहिए।
किशनियो

@ किशनतोभानी आपको हैंडलर जोड़ने के बाद कॉल करना चाहिए । नमूना देखें।
जोसेफ

7
इस समाधान का महत्वपूर्ण हिस्सा है: परिवर्तन घटना हैंडलर जरूरी ट्रिगर होना चाहिए (समझ में आता है ...), मेरे मामले में यह समस्या थी, धन्यवाद!
लार्जन

इसने उद्धारकर्ता के रूप में मदद की, थैंक यू
दिव्या

परिभाषित परिवर्तन समारोह आप का उपयोग कर रहे हैं, मेरी समस्या का समाधान किया। धन्यवाद।
कमलेश

28

एक विकल्प का चयन करने के लिए, .val('value-of-the-option')चयन तत्व पर उपयोग करें। परिवर्तन तत्व को ट्रिगर करने के लिए, का उपयोग करें .change()या .trigger('change')

आपके कोड में समस्याएं डॉट इन के बजाय कॉमा हैं $('.check'),trigger('change');और यह तथ्य कि आप इसे इवेंट हैंडलर को बांधने से पहले कहते हैं।


10
$('#edit_user_details').find('select').trigger('change');

यह चुनिंदा HTML टैग ड्रॉप-डाउन आइटम को बदलेगा id="edit_user_details"


7

JQuery ट्रिगर हैंडलर के साथ अवरुद्ध किए गए लोगों के लिए एक और काम करने वाला समाधान, देशी घटनाओं पर आग लगी आग नीचे की तरह होगी (100% काम कर):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

1
मैंने उपरोक्त सभी की कोशिश की, लेकिन यह केवल मेरे लिए काम करता है। मुझे लगता है, क्योंकि मेरा चयन प्रतिज्ञा के अंदर था। धन्यवाद @ Mohamed23gharbi!
टिलिटो

1
मुझे भी। यह वह समाधान है जो मैं एक घंटे से देख रहा हूं। धन्यवाद।
मर्बन

1
इसका उत्तर होना चाहिए!
MARS

1

विकल्प टैग के मूल्य में लिंक दें

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

1

अगर आप कुछ जांच करना चाहते हैं तो इस तरह से उपयोग करें

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

0

Mohamed23gharbi के उत्तर पर आधारित:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

मेरे मामले में, जहां तत्वों को बनाया गया था, यह एकमात्र तरीका है जो काम करता है।


0

अपनी समस्या को हल करने के लिए आप नीचे दिए गए कोड की कोशिश कर सकते हैं:

डिफ़ॉल्ट रूप से, पहला विकल्प चुनें: jQuery ('। Select')। ढूँढें ('विकल्प') [0] .selected = true;

धन्यवाद, केतन टी

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