選擇：嘗試按Enter鍵一次選擇選項，再按一次激活按鈕單擊，而不使用表單

Question

我有一個使用jQuery Chosen插件的AngularJS應用程序。 我有一個下拉列表讓用戶選擇一個國家，還有一個按鈕，該按鈕執行一個角度函數，該函數從選擇下拉列表中拉出當前選擇的值並將用戶重定向到該國家的頁面。

我的問題與突出顯示可選元素中的選項時按下[enter]的行為有關。 使用下面的代碼，在突出顯示選項的同時按[enter] ，將立即執行goToCountry()函數，而無需先關閉選擇下拉列表。 我想要第一個[enter]關閉選擇下拉菜單，將當前突出顯示的值設置為selected選項。 然后，第二個[輸入]應單擊選擇元素旁邊的按鈕。

我正在對此進行測試以與Chrome一起使用。

我知道使用表單執行此操作的方法 ，但是我想不使用表單執行此操作。 這可能嗎？

角度控制器：

$scope.goToCountry = function() {
    $('#countryPicker option:selected').each(function(){
        //goes to detail page for $(this).val());
    });                
};

for (var i=0;i<countries.length;i++) {
    $('#countryPicker').append('<option value="' + countries[i].name + '">' + countries[i].name + '</option>');
}
$('#countryChooser').chosen();

$("#countryPicker_chosen").bind('keyup',function(e) {
    if(e.which === 13) {
        $("#goToCountryButton").click();
    }
});

HTML：

<select id="countryPicker" data-placeholder="Pick a Country" class="chosen-select">
    <option value=""></option>
</select>

<button id="goToCountryButton" ng-click="goToCountry()">View</button>

Answer 1

在頁面上單擊任何其他控件之前，未隱藏選擇選項（主要在IE8中），我也遇到過類似的問題。 問題出在事件傳播中。

我所做的解決方法是在頁面的安全點上手動觸發文檔單擊事件，以隱藏選擇選項。