Détecter les modifications programmatiques sur une boîte de sélection html

StackOverflow https://stackoverflow.com/questions/1219026

Question

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

IE et FF ne se déclenchent pas "onchange" lorsque la sélection actuelle dans une zone de sélection est modifiée avec javascript. De plus, la fonction js qui modifie la sélection fait partie du framework, je ne peux donc pas la modifier pour déclencher un onchange () à la fin puis 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>

Existe-t-il un moyen quelconque d’obliger test () à appeler myfunction () sans modifier test () (ou à ajouter un événement sur le bouton)?

Merci.

Était-ce utile?

La solution

Si vous pouvez étendre / modifier le framework pour donner un hook / callback quand ils changent les options de sélection, ce serait mieux (une solution pourrait être d’utiliser les capacités dynamiques de js pour le dactylographier?).

À défaut, il existe une solution inefficace: la scrutation. Vous pouvez configurer un appel setTimeout / setInteval qui interroge l'élément de choix souhaité pour l'option de sélection et déclencher votre propre rappel lorsqu'il détecte que quelque chose a changé.

comme pour la réponse à votre question

  

Existe-t-il un moyen de faire appel à test ()   mafonction () sans changer test ()   (ou ajouter un événement sur le bouton)?

oui, en utilisant AOP jQuery http://plugins.jquery.com/project/AOP, cela 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>

Autres conseils

Définissez votre propre fonction de changement qui appelle la fonction de structure, puis appelle un fonction de rappel.

exemple: 

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

La réponse est .... non.

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

Vous devrez personnaliser le cadre ou supprimer vos besoins.

heu ...

vous pouvez accéder à l'événement 'onpropertychange' qui contient une propriété dans les arguments d'événement pour identifier quelle propriété a été modifiée.

Il détecte à la fois les modifications "selectedIndex" et "value" - il suffit de tester la casse "propertyName" Je travaille actuellement avec le framework ASP.NET js. Voici un code copier-coller simple pour cela:

1) définir le gestionnaire:

this._selectionChangedHandler = null;

2) attribuer le gestionnaire

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

3) attacher le gestionnaire à l'événement

$ addHandler (element, "propertychange", this._selectionChangedHandler);

4) créer une fonction 

_onSelectionChanged: function(ev) {

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

Avec JQuery, vous pouvez 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; 
            });
   });

Ceci détecterait le changement par programmation et vous permettrait de répondre à chaque élément modifié

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top