Chromeのselect要素で手動で.change（）が起動しない

Question

ユーザーがキーボードを使用してselect要素（ドロップダウンリスト）の値を変更できるアプリケーションでjsファイルを実行しています。ユーザーが（このファイルを追加する前の通常の方法で）この値を変更すると、コードはバックエンドで実行され、ビューが変更されます。このため、ユーザーがキーボードを使用する場合、プログラムで値が変更されたときに呼び出されることはないため、変更イベントを手動で呼び出す必要があります。これはIEでは問題なく動作していますが、Chromeでは動作しません。これはコードです：

onkeydown = function(e){ 
    if(e.ctrlKey && e.keyCode == 37) { 
     e.preventDefault(); 
     $("#ctl00_ContentPlaceHolder1_ddlTemplate").focus(); 
     var myOpts = document.getElementById('ctl00_ContentPlaceHolder1_ddlTemplate').options; 
     var currIndex = myOpts.selectedIndex; 
     var newVal; 
     if (currIndex > 0) { 
      newVal = myOpts[currIndex-1].value; 
      $("#ctl00_ContentPlaceHolder1_ddlTemplate").val(newVal); 
     } 
    } 
    if(e.ctrlKey && e.keyCode == 39) { 
     e.preventDefault(); 
     $("#ctl00_ContentPlaceHolder1_ddlTemplate").focus(); 
     var myOpts = document.getElementById('ctl00_ContentPlaceHolder1_ddlTemplate').options; 
     var currIndex = myOpts.selectedIndex; 
     var newVal; 
     if (myOpts.length > currIndex + 1) { 
      newVal = myOpts[currIndex+1].value; 
      $("#ctl00_ContentPlaceHolder1_ddlTemplate").val(newVal); 
     } 
    } 
} 
$(templateDDL).blur(function(){ 
    $(templateDDL).change(); 
}); 

templateDDLは、完全なセレクタ名「＃ctl00_ContentPlaceHolder1_ddlTemplate」を含む単なる変数です。私はぼかしイベントにうまく行きます。 （コンソールを使ってテストされますが）$（templateDDL）.change（）は何もしません。

Answer 1

を

$("[id$=templateDDL]").change(..... 

これはjQueryでのみ必要です。それ以外の場合は、Control.ClientIDがあります。

$("#<%=templateDDL.ClientID%>").change(.... 

また、Asp.netにはクライアント静的IDモードがあります。 ClientIDMode = "静的"チェックhere

上記のバインディングのすべて。トリガーの場合は、これを試してください。

$("[id$=templateDDL]").trigger("change"); 

Answer 2

外部変数を使用し、適切に一緒にすべてをバインド：自分のidはasp.netマークアップによる変更は、このようにあなたのユーザjQueryのセレクタENDWITHを生成しないようasp.netコントロールの

var templateDDL = "#ctl00_ContentPlaceHolder1_ddlTemplate"; 
 

 
$(templateDDL).change(function (e) { 
 
    theOption = $(templateDDL).get(0).selectedIndex; 
 
    $("#output").html($(templateDDL).val()); 
 
}); 
 

 
var theOption = 0; 
 

 
function moveBy(x) { 
 
    var total = $(templateDDL).get(0).options.length; 
 
    if (theOption + x >= 0 && theOption + x < total) theOption += x; 
 
    $(templateDDL).get(0).selectedIndex = theOption; 
 
    $(templateDDL).change(); 
 
} 
 

 
onkeydown = function(e) { 
 
    if (e.ctrlKey && e.keyCode == 37) { 
 
    e.preventDefault(); 
 
    moveBy(-1); 
 
    } 
 
    if (e.ctrlKey && e.keyCode == 39) { 
 
    e.preventDefault(); 
 
    moveBy(1); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ctl00_ContentPlaceHolder1_ddlTemplate"> 
 
    <option value="1">option 1</option> 
 
    <option value="2">option 2</option> 
 
    <option value="3">option 3</option> 
 
    <option value="4">option 4</option> 
 
</select> 
 
<div>Output: <span id="output"></span></div>