Обнаружение программных изменений в окне выбора HTML - PullRequest
Новая
       11

Обнаружение программных изменений в окне выбора HTML

5 голосов
/ 02 августа 2009

Есть ли способ заставить элемент выбора HTML вызывать функцию каждый раз, когда его выбор был изменен программно?

И IE, и FF не будут запускать 'onchange', когда текущий выбор в окне выбора изменяется с помощью JavaScript. Кроме того, функция js, которая изменяет выбор, является частью фреймворка, поэтому я не могу изменить его, чтобы вызвать onchange () в конце, например.

Вот пример: 

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

Есть ли способ заставить test () вызывать myfunction () без изменения test () (или добавления события на кнопку)?

Спасибо.

Ответы [ 5 ]

4 голосов
/ 02 августа 2009

Если вы можете расширить / изменить структуру, чтобы дать перехват / обратный вызов, когда они изменяют параметры выбора, было бы лучше (одним из способов могло бы быть использование динамических возможностей js, чтобы ввести его?

В противном случае, существует неэффективное решение - опрос. Вы можете установить вызов setTimeout / setInteval, который опрашивает желаемый элемент выбора опции dom, и запускать собственный обратный вызов, когда он обнаруживает, что что-то изменилось.

что касается ответа на ваш вопрос

Есть ли способ сделать вызов test () myfunction () без изменения test () (или добавление события на кнопку)?

да, используя 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>
1 голос
/ 01 мая 2011

Определите вашу собственную функцию изменения, которая вызывает рамочную функцию, а затем вызывает функция обратного вызова.

например:. 

function change(callback)
{
    frameworkchange();
    callback();
}
0 голосов
/ 20 марта 2014

С 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; 
            });
   });

Это обнаружит изменение программно и позволит вам реагировать на каждый измененный элемент

0 голосов
/ 08 сентября 2009

Гм ...

вы можете получить доступ к событию onpropertychange, которое содержит свойство в аргументах события, чтобы определить, какое свойство было изменено.

Он обнаруживает изменения 'selectedIndex' и 'value' - просто проверьте case 'propertyName'. В настоящее время я работаю с фреймворком ASP.NET js, вот какой-то простой код копирования-вставки для этого:

1) определить обработчик:

this._selectionChangedHandler = null;

2) назначить обработчик

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

3) прикрепить обработчик к событию

$ addHandler (элемент, "propertychange", this._selectionChangedHandler);

4) создать функцию 

_onSelectionChanged: function(ev) {

if (ev.rawEvent.propertyName == "selectedIndex")
        alert('selection changed');
},
0 голосов
/ 02 августа 2009

Ответ .... нет.

DOM запускает событие onchange только в результате действия пользователя, а не кода. Он не предоставляет никаких дополнительных событий для подключения в этом отношении.

Вам нужно будет настроить фреймворк или отбросить ваше требование.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...