單擊鍵盤選項卡按鈕時顯示下拉列表

我有一個下拉列表，我想讓它顯示列表，當用戶單擊鍵盤選項卡按鈕時，嘗試了幾種方式顯示在線但它不工作。下拉列表是html下拉菜單和select2下拉菜單。單擊鍵盤選項卡按鈕時顯示下拉列表

對於第三種方法，下拉菜單顯示何時單擊Tab按鈕，但是當我在下拉列表中選擇另一個值並單擊TAB按鈕時，它仍然保持爲原始值。我可以知道我該如何解決它？

我的下拉列表：

DropDown1

<div class="col-md-4"> 
    <select class="form-control" id="sauces"></select> 
    </div> 
    $('#sauces').select2({ 
     data: [{ 
     id: 0, 
     text: "Banana" 
     }, { 
     id: 1, 
     text: "Red Velvet" 
     }, { 
     id: 2, 
     text: "Vanilla" 
     }, { 
     id: 3, 
     text: "Strawberry" 
     }, { 
     id: 4, 
     text: "Chocolate" 
     }], 

    });

DropDown2

<select> 
    <option value="round">Round</option> 
    <option value="square">Square</option> 
    <option value="circle">Circle</option> 
    <option value="mini" selected>Mini</option> 
</select>

方法我都試過：

1）

 function select2Focus() { 
     var select2 = $(this).data('select2'); 
     setTimeout(function() { 
      if (!select2.opened()) { 
       select2.open(); 
      } 
     }, 0); 
    }

2）

$('.input-group input').keydown(function(e){ 
    if(e.which == 9){ // tab 
     e.preventDefault(); 
     $(this).parent().find('.dropdown-toggle').click(); 
     $(this).parent().find('.dropdown-menu a:first').focus(); 
    } 
});

3）

$(document).on('focus', '.select2', function() { 
    $(this).siblings('select').select2('open'); 
});

來源

2016-12-06 New2Programming

發現您可以加入一些你的HTML嗎？ – TheWandererr

我已經找到了答案，從http://jsfiddle.net/PpTeF/1/ 我已經爲我的項目刪除了以下更改函數，因爲我希望用戶能夠在選擇下拉列表中的值時進行選擇。 $('select').change(function(){ $(this).attr("size",1).css('z-index','1'); });它可以在鍵盤標籤鍵被點擊時顯示下拉菜單，但是這是HTML選擇下拉菜單。希望這可以幫助那些正在尋找類似解決方案的人。

碼在Opening a html select option on focus

來源

2016-12-09 07:50:15 New2Programming

你可以試試這個

$(this).parent().find('.dropdown-toggle').trigger('click');

來源

2016-12-06 07:31:14 brk

嗨，我已經添加了這樣，我可以知道如果我做得對嗎？由於下拉列表值仍未更新。謝謝你的幫助。（'click'）;}（）。（）。（）。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 }）; – New2Programming

單擊鍵盤選項卡按鈕時顯示下拉列表

回答

相關問題