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」イベントのためにページがポストバックすることです。

Enterキーが押されるまで、（マウスがクリックされるのではなく）キーが押されているときにポストバックが発生しないようにする方法はありますか？

編集

キーを押すとアラートプロンプトを表示できます

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

ここで、どのキーが押されたかを知る必要があります。したがって、私は決定を下すことができます。

4

2 に答える 2

1

あなたの質問には少し間違いがあります：

問題は、ドロップダウンリストで別のアイテムが選択されると、「OnSelectedIndexChanged」イベントのためにページがポストバックすることです。

のため、ページは実際に投稿されていAutoPostBack = "true"ます。

まず、AutoPostBackをFalseに変更します。

次に、changeイベントとkeypressイベントを別々に処理することをお勧めします。jQueryを使用して変更イベントを処理してからその変更イベント内で送信し、キーダウンとキーのフィルターも処理する場合は、必要な場合にのみ送信できます。

$("#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);     
        }
      });
    }
});

また、入力した文字で始まるエントリが2つある場合は、最後のエントリを選択することに注意してください。ボックスをフィルタリングできるようにコードを変更することができます。

複数のボックスの例

于 2013-01-11T20:56:37.367 に答える
1

onblur イベントを使用すると、ドロップダウンがフォーカスを失ったときにポストバックされます。

于 2013-01-11T19:13:58.103 に答える