선택한 선택 : 옵션을 선택하려면 입력을 한 번 누르십시오. 양식을 사용하지 않고 버튼 클릭을 활성화하려면 두 번째를 누르십시오.

Question

jQuery Chosen 플러그인을 사용하는 AngularJS 애플리케이션이 있습니다. 사용자가 국가를 선택할 수있는 드롭 다운 목록과 선택 드롭 다운에서 현재 선택한 값을 가져 와서 해당 국가의 페이지로 사용자를 리디렉션하는 각도 기능을 실행하는 버튼이 있습니다.

내 문제는 선택 가능한 요소에서 옵션을 강조 표시 할 때 [enter]을 누르는 동작과 관련이 있습니다. 아래 코드를 사용하여 옵션이 강조 표시되어있는 동안 [enter]을 누르면 선택 드롭 다운을 먼저 닫지 않고 goToCountry() 기능을 즉시 실행합니다. 먼저 [enter]으로 선택 드롭 다운을 닫고 현재 강조 표시된 값을 선택한 옵션으로 설정합니다. 그런 다음 두 번째 [enter]은 select 요소 옆의 버튼을 클릭해야합니다.

Chrome에서 작동하도록 테스트하고 있습니다.

이 작업을 수행하는 방법을 알고 있는데 using a form,하지만 양식을 사용하지 않고이 작업을 수행하고 싶습니다. 이것이 가능한가?

각도 컨트롤러 :

$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 : 나는 페이지에있는 다른 컨트롤의 클릭에, 선택 옵션 IE8에서 주로 (숨겨지지 않습니다 경우 이전에 유사한 문제에 직면 한

<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

). 이벤트 전파에 문제가있었습니다.

해결 방법은 수동으로 페이지의 안전 지점에서 문서 클릭 이벤트를 트리거하여 선택 옵션을 숨기는 것입니다.