6
votes

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

Y a-t-il un moyen de faire appel à une fonction HTML Select appeler une fonction chaque fois que sa sélection a été modifiée par programme?

IE et FF ne pivotera pas "Onchange" lorsque la sélection actuelle dans une zone de sélection est modifiée avec JavaScript. À côté, la fonction JS change que la sélection fait partie du cadre, donc je ne peux pas la modifier pour déclencher un onchange () à la fin, par exemple. P>

Voici un exemple: P>

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

javascript html html-select events

1 commentaires

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

5 Réponses :

4
votes

Si vous pouvez étendre / modifier le cadre pour donner un crochet / rappel lors de la modification des options de sélection, ce serait mieux (une solution pourrait être d'utiliser les capacités dynamiques de JS à Duck Tapez-le?).

omettre cela, il y a une solution inefficace - sondage. Vous pouvez configurer un appel de Settimeout / SetInteval qui interroge l'élément d'option de sélection souhaité, et tirez votre propre rappel lorsqu'il détecte que quelque chose a changé. p>

comme pour la réponse à votre question p>

Y a-t-il un moyen d'appeler () appeler myfunction () sans changement de test () (ou ajout d'un événement sur le bouton)? P> blockQquote>

Oui, en utilisant jQuery aop http://plugins.jquerer.com/project / AOP , il donne une solution Easy-ISH. P>

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

2 commentaires

J'ai aussi pensé à la deuxième option, mais j'utiliserais seulement la minuterie s'il s'agit de mon dernier recours. La première solution sonne bien, comment pourrais-je prolonger / crochet de test sans modifier son code source?

+1. L'interrogation est une option qui mérite d'être envisagée. Cependant, vous devriez accepter que le code que vous souhaitez invoquer sur le changement ne fonctionne pas de manière synchrone avec le changement.

0
votes

La réponse est .... Non.

Le DOM déclenche uniquement l'événement OnChange à la suite de l'action de l'utilisateur, pas de code. Il ne fournit aucun événement supplémentaire à accrocher à cet égard.

Vous devrez personnaliser le cadre ou supprimer votre besoin.

0 commentaires

0
votes

ahem ...

Vous pouvez accéder à l'événement "OnPropertyChange" contient une propriété dans les arguments de l'événement pour identifier quelle propriété a été modifiée. p>

Il détecte les modifications «sélectionnées» et «valeur» - Simplement testez le test «Nom de propriété» Je travaille actuellement avec le cadre ASP.NET JS Voici un code de pâte droite-coller pour cela: p>

1) Définir le gestionnaire: strong> p>

this._selectionChangedHandler = null; p>

2) Attribuer le gestionnaire strong> p>

this._selectionChangedHandlerdler = fonction.Createdélégate (ceci, cela._onsélectionChanged); p>

3) Attachez le gestionnaire à l'événement strong> p>

$ addhandler ( Élément, "de biensChanger", this._selectionChangedHandler); p>

4) Créer une fonction forte> p>

_onSelectionChanged: function(ev) {

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

0 commentaires

1
votes

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

E.g.: P>

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

0 commentaires

0
votes

avec jQuery, vous pouvez faire quelque chose comme xxx

ceci détecterait le changement de manière programmatique et vous permettrait de répondre à chaque élément modifié

0 commentaires