옵션 이벤트를 클릭하십시오.

옵션 요소에 대한 이벤트를 처리하는 방법은 무엇입니까?옵션 이벤트를 클릭하십시오.

<select> 
     <option value='option1'>Gateway 1</option> 
     <option value='option2'>Gateway 2</option> 
     <option value='option3'>Gateway 3</option> 
</select>

옵션 요소를 클릭하면 요소에 대한 간단한 설명을 표시하려고합니다. 어떤 아이디어로 그렇게 할 수 있습니까?

출처

2011-01-12 Lost in OWL

어떤 종류의 설명입니까? – amosrivera

누구나 자바 스크립트 솔루션 (jQuery 아님)에 온다면'change' 이벤트에 대한 이벤트 리스너를 추가하십시오. –

나중에 참조하기 위해, @ niksvp의 대답에서 주어진 첫 번째 해결책은 실제로이 질문에 대한 정답입니다. 주어진 jQuery 응답은 jQuery에만 해당되는 반면,이 질문은 해당 사용을 지정하지 않습니다. – ManoDestra

jQuery의 change event을 사용하려고합니다. 옵션 텍스트를 경고로 표시하지만 필요에 따라 원하는 것을 표시 할 수 있습니다. (당신은 또한, 분명히, 그것은 경고 할 필요가 없습니다 ... 페이지의 다른 부분의 내부를 넣을 수 있습니다.)

$('#myOptions').change(function() { 
    var val = $("#myOptions option:selected").text(); 
    alert(val); 
});

을 또한, 메모, 내가 ID를 추가 한 당신의 select 태그에 너무 (myOptions) 이벤트를보다 쉽게 처리 할 수 있습니다.

예 : http://jsfiddle.net/S9WQv/

출처

2011-01-12 15:25:06 JasCav

IE9에서는 이것이 작동하지 않는다. –

'# myOptions'는'select' 태그라는 것을 알아두면 좋다. – Tomasz

당신이 또는

<select onchange="alert(this.options[this.selectedIndex].text);"> 
     <option value='option1'>Gateway 1</option> 
     <option value='option2'>Gateway 2</option> 
     <option value='option3'>Gateway 3</option> 
</select>

, 옵션의 온 클릭 이벤트를 사용하여 자바 스크립트에서 동일한 작업을 수행하지만, 모든 브라우저에서 호환되지 않습니다주의 할 jQuery를 사용하여 JasCav에 의해 지정된.

<select> 
     <option value='option1' onclick="alert(this.value);" >Gateway 1</option> 
     <option value='option2'>Gateway 2</option> 
     <option value='option3'>Gateway 3</option> 
</select>

출처

2011-01-12 15:22:45 niksvp

이것은 어떻게 좋은 해결책입니까? 키보드로 옵션을 선택할 수 있습니다. 아무런 관련이없는 클릭을 발생시키지 않습니다. –

@StevenLu - 좋은 참고로,이 경우'keypress' 이벤트를 바인드 할 수도 있습니다. 그러나 여기서 OP는 답안에 반영되는 '클릭'이벤트에 어려움을 겪고있다. – niksvp

내 생각에이 문제는 [XY 문제] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)의 경우이며 클릭을 사용하는 것은 약간의 간격 틀렸고 완전히 틀렸어. 나의 직감은 클릭과 키보드 핸들러를 사용하는 것이 여전히 어떤 모바일 플랫폼에서도 작동하지 않는다는 것이다. –

옵션 이벤트를 클릭하십시오.

답변

관련 문제