0

这是一个下拉列表，可以在所选索引上发回更改。

<asp:DropDownList ID="_ddlClientType" runat="server"  AutoPostBack = "true"
   OnSelectedIndexChanged="ClientType_SelectedIndexChanged"  >                                 
   <asp:ListItem Value="-1" Text="CANCEL.."></asp:ListItem>
   <asp:ListItem Value="11" Text="External"></asp:ListItem>
   <asp:ListItem Value="12" Text="Internal"></asp:ListItem>
   <asp:ListItem Value="13" Text="TOM"></asp:ListItem>
</asp:DropDownList>

使用鼠标时，一切正常。但是，我希望用户能够通过使用向上/向下箭头键来选择不同的项目。此外，当用户键入字母时，以该字母开头的第一个项目会突出显示。

问题是当在下拉列表中选择了不同的项目时，页面会因为“ OnSelectedIndexChanged ”事件而回发。

有没有办法防止在按下键（而不是点击鼠标）时发生回发，直到按下回车键？

编辑

按下某个键时，我可以显示警报提示

$('select').keypress(function () {
  alert('A key was pressed')
});

现在，我需要知道按下了哪个键。这样，我就可以做出决定了。

4

2 回答 2

1

如果您使用 onblur 事件，它将在下拉列表失去焦点时回发。

于 2013-01-11T19:13:58.103 回答
1

你的问题有一点错误：

问题是当在下拉列表中选择了不同的项目时，页面会由于“OnSelectedIndexChanged”事件而回发。

该页面实际上是因为AutoPostBack = "true".

首先将 AutoPostBack 更改为 False。

那么我建议您以不同的方式处理更改事件和按键事件。如果您使用 jQuery 处理更改事件，然后在该更改事件中提交，并且还处理 keydown 和过滤键，那么您只能在需要时提交。

$("#TargetSelect").change(function(event){
    console.debug($(this).val());
});
$("#TargetSelect").keydown(function(event){
    event.preventDefault();
  if(event.which == 13){
     $(this).trigger('change');
  }else if(event.which == 38){
    var idx = this.selectedIndex;
    if(idx != 0){
      $("#TargetSelect").prop('selectedIndex', idx-1); 
    }
  }else if(event.which == 40){
    var idx = this.selectedIndex;
    var maxIndex = $('select').children('option').length;
    idx += 1;           
    if(idx < maxIndex){
      $("#TargetSelect").prop('selectedIndex', idx); 
    }
  }else{
      var $options = $('select').children('option');
      $options.each(function(){
        if(String.fromCharCode(event.which) == $(this).text().charAt(0)){
          var idx = $(this).index();
          $("#TargetSelect").prop('selectedIndex', idx);     
        }
      });
    }
});

这是一个（更新的）示例。用表单的提交替换 console.debug ，你应该是金色的。

如果您有多个选择框，则代码应如下所示：

$("select").change(function(event){
    console.debug($(this).val());
});
$("select").keydown(function(event){
    event.preventDefault();
  if(event.which == 13){
     $(this).trigger('change');
  }else if(event.which == 38){
    var idx = this.selectedIndex;
    if(idx != 0){
      $(this).prop('selectedIndex', idx-1); 
    }
  }else if(event.which == 40){
    var idx = this.selectedIndex;
    var maxIndex = $(this).children('option').length;
    idx += 1;           
    if(idx < maxIndex){
      $(this).prop('selectedIndex', idx); 
    }
  }else{
      var $options = $(this).children('option');
      var $thisSelect = $(this);
      $options.each(function(){
        if(String.fromCharCode(event.which) == $(this).text().charAt(0)){
          var idx = $(this).index();
          $thisSelect.prop('selectedIndex', idx);     
        }
      });
    }
});

另请注意，如果您有两个以键入的字母开头的条目，那么您将选择最后一个条目。可以对代码进行修改以允许过滤框。

多个盒子的例子

于 2013-01-11T20:56:37.367 回答