6

選択がプログラムによって変更されるたびに、HTML select 要素に関数を呼び出させる方法はありますか?

IE と FF はどちらも、選択ボックス内の現在の選択が JavaScript で変更された場合に「onchange」を起動しません。さらに、選択を変更する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() を変更せずに (またはボタンにイベントを追加せずに)、test() に myfunction() を呼び出させる方法はありますか?

ありがとう。

4

5 に答える 5

4

選択オプションを変更したときにフック/コールバックを提供するようにフレームワークを拡張/変更できる場合は、それがより良いでしょう (1 つの方法は、js の動的機能を使用してダック入力することでしょうか?)。

それができない場合は、非効率的な解決策、つまりポーリングがあります。目的の選択オプション dom 要素をポーリングする setTimeout/setInteval 呼び出しを設定し、何かが変更されたことを検出したときに独自のコールバックを開始することができます。

あなたの質問への答えとして

test() を変更せずに (またはボタンにイベントを追加せずに)、test() に 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>
于 2009-08-02T14:48:52.110 に答える
1

フレームワーク関数を呼び出してからコールバック関数を呼び出す独自の変更関数を定義します。

例えば：

function change(callback)
{
    frameworkchange();
    callback();
}
于 2011-05-01T15:00:51.770 に答える
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; 
            });
   });

これにより、変更がプログラムで検出され、変更された各項目に対応できるようになります

于 2014-03-20T05:21:49.183 に答える
0

ええと...

イベント「onpropertychange」にアクセスできます。これには、変更されたプロパティを識別するためのイベント引数内のプロパティが含まれています。

「selectedIndex」と「value」の両方の変更を検出します-単にケーステスト「propertyName」私は現在ASP.NET jsフレームワークで作業しています。これは、そのための単純なコピーアンドペーストコードです。

1) ハンドラーを定義します。

this._selectionChangedHandler = null;

2) ハンドラーを割り当てる

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

3) ハンドラーをイベントにアタッチする

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

4) 関数の作成

_onSelectionChanged: function(ev) {

if (ev.rawEvent.propertyName == "selectedIndex")
        alert('selection changed');
},
于 2009-09-07T22:14:05.803 に答える
0

答えはノーだ。

DOM は、コードではなくユーザー アクションの結果として onchange イベントのみを発生させます。この点に関して、フックする追加のイベントは提供されません。

フレームワークをカスタマイズするか、要件を削除する必要があります。

于 2009-08-02T14:54:06.327 に答える