Question

我在应用程序上运行了一个js文件，用户可以使用键盘来更改select元素的值（下拉列表）。当用户通过单击（在添加此文件之前的正常方式）更改此值时，代码将在后端运行以更改视图。因此，当用户使用键盘时，我需要手动调用change事件，因为在以编程方式更改值时不会调用它。这在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只是一个包含完整选择器名称的变量＆＃34;＃ctl00_ContentPlaceHolder1_ddlTemplate＆＃34;。我对模糊事件很好。（使用控制台测试）但是$（templateDDL）.change（）什么也没做。

Answer 1

使用外部变量并将所有内容正确绑定在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于asp.net控件，因为他们的id确实通过asp.net标记更改生成了你的用户jQuery选择器endwith像这样

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

如果你想通过jQuery只想这个。否则有Control.ClientID

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

并且Asp.net也有客户端静态ID模式。的ClientIDMode =＆＃34;静态＆＃34;检查here

以上都是绑定。如需触发，请尝试此

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

手动触发.change（）未触及Chrome

2 个答案: