2011-05-11 2 views
4

저는이 질문에 대한 답변을 오랫동안 찾고있었습니다. 행운이나 버그가있는 해결책은 최대입니다.드롭 다운/select - list에서 이미 선택된 항목을 선택하십시오.

내가 직면하는 문제는 내가 선택한 항목을 선택할 때 (분명히) "onchange"이벤트를 발생시키지 않는 선택 요소가 있다는 것입니다. 이처럼

:

이제
<select onchange="alert(this.value);"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

는, 내가 첫 번째 항목 1을 선택 말한다. 그런 다음 나중에 항목 1을 다시 선택할 수 있어야합니다.

이 기능은 내가 추진하고있는 프로젝트의 성공에 매우 중요합니다.

도움을 주시면 대단히 감사하겠습니다.

편집 : 당신은 "스페인"선택이 기능은 메신저 빨리 국가로 이동하는 사용자가 드롭 다운으로 presentet되는 구글지도와 프로젝트 (예 : 작업으로 필요한

(상세 정보) 드롭 다운에서 Google지도가 귀하의 시야로 스페인을 설정합니다.

스페인에 가고 싶을 때지도를 드래그하여 이탈리아로 돌아갈 때 문제가 발생합니다. 이제 스페인으로 돌아가고 싶지만 위선자가 먼저 다른 것을 선택할 때까지 드롭 다운에서 선택하십시오. 내 상사는 그 것을 좋아하지 않습니다 :)

편집 2 : 솔루션

이제는 몇 가지 해결책이 있습니다. 그들 중 하나는 (컨트롤 unfocusing 때)이 수있는 작업을 onblur 작업을 던질 것입니다, 나는 onchange 목록을 흐리게 수 있지만 여전히 사람들이 동일한 항목을 다시 선택, 컨트롤을 흐리게 트리거를 실 거예요, 그리고 그들이 스스로 초점을 바꾸지 않는 한, 그들은지도의 변화를 보지 않을 것입니다.

아직도 옵션 선택/클릭/흐리게 또는 무엇이든간에 불쾌감을주는 이벤트를 찾기가 너무 어려워야한다는 것을 이해할 수 없습니다. 나 자신을 계속보고 있고 나중에 나중에 다시 확인하십시오.

편집 3 : 그것은 지금 어쨌든 위해이어야, 수, 표준,하지만 충분히 가까이되었다 정확히으로 최종 솔루션

오른쪽 그래서 내가 마지막으로,이 작업을 얻을 수 있었다.

내가 생각해 낸 해결책은 선택 항목 맨 위에 "국가 선택하십시오"옵션을 추가하는 것이 었습니다. 그런 다음 변경하면 텍스트를 변경하고 "국가 선택"을 선택한 항목의 값으로 변경하고 selectedindex를 0으로 재설정합니다. 이렇게하면 스페인을 선택하면 맨 위에 표시됩니다 비활성화 상태에있는 목록의 상태, 그리고 작동 상태에있는 상태에있는 상태. 이제 목록의 중간에있는 스페인을 클릭하여 스페인으로 돌아가도 여전히 선택됩니다 (최상위 항목이 있음)

동료로부터 깔끔하고 아이디어가 제공되었습니다.

스크립트는 다음과 같습니다 :

var dummyOption; 
function setdummyCountry(obj) 
{ 
    var selectedOption = obj.options[obj.selectedIndex]; 
    if (dummyOption != null) { 
     dummyOption.text = selectedOption.text; 
     dummyOption.value = selectedOption.value; 
    } 
    else { 
     dummyOption = document.createElement("option"); 
     dummyOption.text = selectedOption.text; 
     dummyOption.value = selectedOption.value; 
     dummyOption.setAttribute("disabled", "true"); 
     obj.options[0] = dummyOption; 
    } 
    obj.selectedIndex = 0; 
} 

<select onchange="setdummyCountry(this);"> 
    <option value="">Please select country</option> 
    <option value="ES">spain</option> 
    <option value="SE">sweden</option> 
    <option value="NO">norway</option> 
</select> 

내가이 사람을 도움이되기를 바랍니다!

여러분의 아이디어와 시간에 감사드립니다.

+1

당신의 onclick에 onchange를 변경하는 경우 않는 당신을 위해 이런 종류의 그것을? – Paddy

+0

이 동작이 필요한 이유에 대한 정보를 추가 할 수 있습니까? 우리는 당신에게 더 나은 대안을 줄 수 있을지도 모릅니다 – JohnP

+0

일단 모든 옵션을 먼저 쓰고'selected' 태그로 추가하십시오. 모든 옵션 배열에있는 건가? 설명하십시오 더 – diEcho

답변

1

이것은 아마도 당신이 원하는 것이 아니 겠지만,이 또 다른 대안을 결정할 수 있습니다. 후 때 사용자 휴가 기본값으로 다시 (비어있는 하나/첫 번째) 옵션

<select onchange="alert(this.value);this.value='';"> 
<option value='' selected='selected'></option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

그것을 얻을 옵션을 선택하거나

<select onblur="alert(this.value);"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

을 할 수 있지만,이 방법은 함수 (경고)를 호출합니다/목록 초점을 없앱니다/흐리게 : P

2

을 나는 같은 항목을 선택하면 방법 변경 이벤트거야 화재없는 존재라고 생각합니다. 우리는 같은 문제에 직면했기 때문에 간단한 해킹이있었습니다. 항목을 선택하면 스팬에서 선택한 항목을 사용자에게 표시하고 드롭 다운 값을 기본값 (- 선택 -)으로 다시 설정합니다.

HTH

1

나는 같은 시나리오에 대한 솔루션을 찾고, 같은 대한 AngularJS와 지시어를 작성 결국 한 - select 태그 떨어져 포커스를 제거하는 element[0].blur();을 사용

guthub link - angular select

. 로직은 드롭 다운의 두 번째 클릭시이 블러를 트리거하는 것입니다. 사용자는 드롭 다운 메뉴에서 동일한 값을 선택하더라도

as-select

트리거 얻는다.

DEMO - link

관련 문제