2009-08-02 13 views
5

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

आईई और एफएफ दोनों 'एक्सचेंज' नहीं फेंकेंगे जब एक चयनित बॉक्स में वर्तमान चयन जावास्क्रिप्ट के साथ संशोधित किया जाएगा। इसके अलावा, जेएस फ़ंक्शन जो चयन करता है, चयन फ्रेमवर्क का हिस्सा है, इसलिए मैं इसे उदाहरण के लिए अंत में एक एक्सचेंज() ट्रिगर करने के लिए नहीं बदल सकता।

<body> 
<p> 
<select id="sel1" onchange="myfunction();"><option value="v1">n1</option></select> 
<input type="button" onclick="test();" value="Add an option and select it." /> 
</p> 
<script type="text/javascript"> 
    var inc = 1; 
    var sel = document.getElementById('sel1'); 
    function test() { 
     inc++; 
     var o = new Option('n'+inc, inc); 
     sel.options[sel.options.length] = o; 
     o.selected = true; 
     sel.selectedIndex = sel.options.length - 1; 
    } 

    function myfunction() { 
     document.title += '[CHANGED]'; 
    } 
</script> 
</body> 

वहाँ परीक्षण() बदल रहा है (या बटन पर एक घटना को जोड़ने) के बिना परीक्षण() कॉल myfunction बनाने के लिए किसी भी तरह से() है:

यहाँ एक उदाहरण है?

धन्यवाद।

+0

onchange घटना नहीं बल्कि साधन कि उपयोगकर्ता ने अपना चयन बदल दिया और यह नहीं कि विकल्प बदल दिए गए हैं। – Gumbo

उत्तर

4

यदि आप चुनिंदा विकल्पों को बदलते समय एक हुक/कॉलबैक देने के लिए ढांचे को विस्तार/संशोधित कर सकते हैं, तो यह बेहतर होगा (जेएस की गतिशील क्षमताओं का उपयोग करने के लिए यह एक तरीका हो सकता है?)।

विफल होने के कारण, एक अक्षम समाधान - मतदान है। आप एक सेटटाइमआउट/सेट इंटेवल कॉल सेट कर सकते हैं जो वांछित चयन विकल्प डोम तत्व का चुनाव करता है, और जब यह पता चलता है कि कुछ बदल गया है तो अपने कॉलबैक को बंद कर दें।

अपने प्रश्न

का जवाब के लिए वहाँ के रूप में() परीक्षण() कॉल myfunction बनाने के लिए किसी भी तरह से परीक्षण() बदल रहा है (या बटन पर एक घटना को जोड़ने) के बिना है?

हाँ, jquery AOP http://plugins.jquery.com/project/AOP का उपयोग करके, यह एक आसान-आश समाधान प्रदान करता है।

<body> 
<p> 
<select id="sel1" onchange="myfunction();"><option value="v1">n1</option></select> 
<input type="button" onclick="test();" value="Add an option and select it." /> 
</p> 
<script type="text/javascript"> 
    var inc = 1; 
    var sel = document.getElementById('sel1'); 
    function test() { 
     inc++; 
     var o = new Option('n'+inc, inc); 
     sel.options[sel.options.length] = o; 
     o.selected = true; 
     sel.selectedIndex = sel.options.length - 1; 
    } 

    function myfunction() { 
     document.title += '[CHANGED]'; 
    } 

    //change to aop.after if you want to call afterwards  
     jQuery.aop.before({target: window, method: 'test'}, 
     function() { 
      myfunctino(); 
     } 
    ); 
</script> 
</body> 
+0

मैंने दूसरे विकल्प के बारे में भी सोचा लेकिन मैं केवल टाइमर का उपयोग करता हूं अगर यह मेरा आखिरी उपाय है। पहला समाधान अच्छा लगता है, मैं अपने स्रोत कोड को संशोधित किए बिना परीक्षण/विस्तार कैसे कर सकता हूं? –

+0

+1। मतदान एक विकल्प पर विचार करने लायक है। हालांकि आपको यह स्वीकार करना होगा कि जिस कोड को आप परिवर्तन पर आमंत्रित करना चाहते हैं वह परिवर्तन के साथ सिंक्रनाइज़ नहीं होता है। – AnthonyWJones

+0

jQuery.aop समाधान एक आकर्षण की तरह काम करता है। आपका बहुत बहुत धन्यवाद! –

0

उत्तर है .... नहीं।

डीओएम केवल उपयोगकर्ता कार्रवाई कोड के परिणामस्वरूप नतीजे की घटना को सक्रिय करता है। यह इस संबंध में हुक करने के लिए कोई अतिरिक्त कार्यक्रम नहीं प्रदान करता है।

आपको ढांचे को अनुकूलित करने या अपनी आवश्यकता को छोड़ने की आवश्यकता होगी।

0

अहम ...

आप घटना का उपयोग कर सकते 'onpropertychange' यह पहचान करने के लिए जो संपत्ति बदल गया था घटना तर्कों के भीतर एक संपत्ति में शामिल है।

: -

यह दोनों 'SelectedIndex' और 'मान' परिवर्तन का पता लगाता है बस मामले परीक्षण 'प्रॉपर्टी' मैं वर्तमान में यहां ASP.NET js ढांचे के साथ काम कर रहा हूँ कि के लिए कुछ सीधे कॉपी-पेस्ट कोड है 1) हैंडलर परिभाषित करें:

यह ._selectionChangedHandler = null;

2) आवंटित हैंडलर

this._selectionChangedHandler = Function.createDelegate (यह, इस।_onSelectionChanged);

3) घटना

$ addHandler (तत्व, "propertychange", this._selectionChangedHandler) के संचालक देते हैं;

4) समारोह

_onSelectionChanged: function(ev) { 

if (ev.rawEvent.propertyName == "selectedIndex") 
     alert('selection changed'); 
}, 
1

अपने स्वयं के परिवर्तन समारोह ढांचा फ़ंक्शन को कॉल करने और फिर एक कॉलबैक फ़ंक्शन को कॉल परिभाषित पैदा करते हैं।

जैसे:

function change(callback) 
{ 
    frameworkchange(); 
    callback(); 
} 
0

JQuery के साथ, आप इस प्रोग्राम के रूप में परिवर्तन का पता लगाने और आप प्रत्येक आइटम का जवाब देना होगा की तरह

$(document).ready(function(){ 

      $('#select-id').change(function(e){ 
       e.preventDefault(); 
       //get the value of the option selected using 'this' 
       var option_val = $(this).val(); 

        if(option_val == "v1"){ 
         //run your function here 
        } 
       return true; 
      }); 
    }); 

कुछ कर सकते हैं बदल

संबंधित मुद्दे