2012-07-13 3 views
0

몇 가지 옵션이있는 드롭 다운 선택 상자가 있습니다. 드롭 다운을 클릭하면 드롭 다운이 확장되고 모든 옵션이 표시됩니다.마우스를 올려 놓을 때 선택 상자 옵션을 표시하는 방법은 무엇입니까?

하지만이 기능을 클릭하는 대신 mouserover와 함께 사용하고 싶습니다.

마우스 오버시 모든 옵션을 표시하고 싶습니다. 이것에 대해 어떤 생각을 갖고있는 사람이 있습니까?

내가 styledSelect jQuery 플러그인을 사용하고

업데이트되었습니다. 이제이 플러그인은 HTML 선택 상자를 div 및 li 기반 선택 상자로 변환합니다. Here is the plugin documentation

+0

사내 사람, 이것을 읽으십시오 - 당신이하려는 것은 표준적인 HTML 연습이 아닙니다 : http://stackoverflow.com/questions/4292061/mouseover-option-of- select-for-ie –

답변

0

나는 이것이 정확히 당신이 염두에 두지는 않았지만 올바른 방향 일 수 있습니다.

function toggleSelectBox(selbox) { 
    if (selbox.size > 1) { //HIDE: 
     selbox.size = 1; 
     selbox.style.position = 'static'; 
    } else { //SHOW: 
     selbox.size = selbox.options.length; 
     selbox.style.position = 'absolute'; 
     selbox.style.height = 'auto'; 
    } 
} 


<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)"> 
    <option value="">opt1</option> 
    <option value="">opt2</option> 
    <option value="">opt3</option> 
</select> 
+0

selbox.options는 콘솔에서 정의되지 않은 오류입니다. – Ahmad

+0

+1 나는 당신 때문에 나의 대답을 삭제했습니다 –

+0

@Ahmad 다음 콘솔이 잘못되었습니다 –

0

작업을 수행하려면 CSS를 사용해야합니다. html의 고전적인 선택 상자로 할 수 없습니다. 여기에 example이 있습니다.

0

DOML 트리의 일부로 select를 사용하여 일부 mouseOver drop div를 빌드 할 수 있다고 생각합니다.이 "옵션"정보로 선택 하위 항목으로 액세스 할 수 있습니다. 그래서 당신은 단지 mouseOver에서 select를 시뮬레이트 할 수 있다고 생각합니다.

0

다른 점은 스크립트 파일을 참조하는 순서가 jquery 파일을 가지고 있기 때문에 js 파일에 참조를 추가하기 전에 해당 함수를 덮어 쓰는 것입니다. 이상한 이유로 사파리에서는 작동하지 않지만 작동하지는 않습니다.

관련 문제