Détecter les modifications programmatiques dans une zone de sélection html

Existe-t-il un moyen de faire en sorte qu'un élément de sélection HTML appelle une fonction chaque fois que sa sélection a été modifiée par programmation?Détecter les modifications programmatiques dans une zone de sélection html

IE et FF ne déclencheront pas 'onchange' lorsque la sélection actuelle dans une zone de sélection est modifiée avec javascript. De plus, la fonction js qui change la sélection fait partie du framework donc je ne peux pas le changer pour déclencher un onchange() à la fin par exemple.

Voici un exemple:

<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>

Est-il possible de faire l'essai() appel myfunction() sans changer de test() (ou l'ajout d'un événement sur le bouton)?

Merci.

Source

2009-08-02 Anonymous

L'événement onchange plutôt moyen que l'utilisateur a changé sa sélection et non que les options ont été modifiées. – Gumbo

Si vous pouvez étendre/modifier le cadre pour donner un hook/callback quand ils changent les options de sélection, ce serait mieux (une façon pourrait être d'utiliser les capacités dynamiques de js pour le taper?). A défaut, il existe une solution inefficace: l'interrogation. Vous pouvez configurer un appel setTimeout/setInteval qui interroge l'élément select choisi dom et déclenche votre propre rappel lorsqu'il détecte que quelque chose a changé.

comme la réponse à votre question

Est-il possible de faire l'essai() appel myfunction() sans changer de test() (ou l'ajout d'un événement sur le bouton)?

oui, en utilisant jQuery AOP http://plugins.jquery.com/project/AOP, il donne une solution facile.

<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>

Source

2009-08-02 14:48:52 Chii

J'ai aussi pensé à la deuxième option, mais je n'utiliserais la minuterie que si c'était mon dernier recours. La première solution sonne bien, comment pourrais-je étendre/hook test sans modifier son code source? –

+1. Le sondage est une option qui mérite d'être considérée. Cependant, vous devrez accepter que le code que vous souhaitez invoquer en cas de modification ne fonctionne pas de manière synchrone avec le changement. – AnthonyWJones

La solution jQuery.aop fonctionne comme un charme. Merci beaucoup! –

La réponse est .... non.

Le DOM déclenche uniquement l'événement onchange à la suite de l'action de l'utilisateur et non du code. Il ne fournit aucun événement supplémentaire à accrocher à cet égard.

Vous devrez personnaliser le cadre ou abandonner vos exigences.

Source

2009-08-02 14:54:06 AnthonyWJones

ahem ...

vous pouvez accéder à l'événement « onPropertyChange » il contient une propriété dans les arguments d'événement pour identifier les biens a été modifiée.

Il détecte à la fois « selectedIndex » et les changements « valeur » - tout simplement cas test « PropertyName » Je travaille actuellement avec le cadre de l'ASP.NET est un code de pâte de copie directement ici pour que:

1) define handler:

this._selectionChangedHandler = null;

2) assigner gestionnaire

this._selectionChangedHandler = Function.createDelegate (ceci, cela._onSelectionChanged);

3) attach gestionnaire à l'événement

$ addHandler (élément, "propertyChange", this._selectionChangedHandler);

4) créer la fonction

_onSelectionChanged: function(ev) { 

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

Source

2009-09-07 22:14:05

définir votre propre fonction de changement qui appelle la fonction de cadre et appelle une fonction de rappel .

par exemple:

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

Source

2011-05-01 15:00:51 Sam

Avec JQuery, vous pourriez faire quelque chose comme

$(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; 
      }); 
    });

Ce détecterait le changement par programme et vous permettent de répondre à chaque élément a changé

Source

2014-03-20 05:21:49 Nlinscott

Détecter les modifications programmatiques dans une zone de sélection html

Répondre

Questions connexes