1. 홈
  2. 질의 응답
  3. document.getElementById는 드롭 다운 선택 메뉴에 null을 반환합니다.

document.getElementById는 드롭 다운 선택 메뉴에 null을 반환합니다.

2011-03-18 3 views
0

언어의 드롭 다운 선택과 비슷한 드롭 다운 선택 메뉴를 만들려고합니다 (http://translate.google.com/#).document.getElementById는 드롭 다운 선택 메뉴에 null을 반환합니다.

<ul id="Select"> 
    <li> 
     <select id="myId"    
      onmouseover="mopen('options')" 
      onmouseout="mclosetime()"> 

     <div id="options" 
      onmouseover="mcancelclosetime()" 
      onmouseout="mclosetime()"> 
      <option value="1" selected="selected">One</option> 
      <option value="2">Two</option> 
      <option value="3">Three</option> 
     </div> 
     </select> 
    </li> 
</ul>

와 자바 스크립트 :

function mopen(id) 
{ 
    // cancel close timer 
    mcancelclosetime(); 

    // close old layer 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 

    // get new layer and show it 
    ddmenuitem = document.getElementById(id); 
     ddmenuitem.style.visibility = 'visible'; 

}

그러나 document.getElementById를 null을 반환

나는 현재의 HTML 코드가 있습니다.

select 목록이없는 div 요소와 함께 코드를 사용하면 document.getElementById (id)가 적절한 div 값을 반환합니다.

어떻게 수정합니까? 또는 http://translate.google.com과 같은 드롭 다운 선택 메뉴를 만드는 더 좋은 방법이 있습니까?

출처

2011-03-18 tucson

+2

드롭 다운 메뉴 당신은에 실제로 HTML'select' 요소하지 않은 링크 - 그들이보고처럼 행동하게하고 JavaScript/CSS를 사용하는 것. 최소한의 노력으로이 작업을 수행 할 수있는 JavaScript 라이브러리, jQuery 플러그인 등을 찾을 수있을 것입니다. –

답변

5

div는 select 태그 안에 있습니다. 이 태그가 유효하지 않은지 확인하려면 select 태그 외부에서 div를 이동하십시오. 지금까지 더 나은 방법으로 제공 한 링크의 드롭 다운은 select 태그를 전혀 사용하지 않고 있습니다. 그것은 단순히 드롭 다운 메뉴처럼 보이도록 스타일이 지정되어 있으며 내부의 모든 링크와 함께 숨겨진 div를 사용하고 있습니다. 이게 도움이 되길 바란다! -> 시작하려면 무료 코드가 필요합니다.

<div id='fakeDropdown'> 
    <div class='triangle'> </div> 

    <div id='menu'> 
     <a href='#'> link </a> 
     <a href='#'> link </a> 
     <a href='#'> link </a> 
     <a href='#'> link </a> 
    </div> 

</div>

는 CSS

#fakeDropdown{ 
background-color: #888; 
height: 30px; 
width: 150px; 
    cursor: pointer; 
} 
#menu{ 
    display: none; 
    background-color: #888; 
height: 200px; 
    width: 800px; 
    position: relative; 
    top: 30px; 
} 
.triangle{ 
font-size: 0px; line-height: 0%; width: 0px; 
border-top: 20px solid #000; 
border-left: 10px solid #888; 
border-right: 10px solid #888; 
float: right; 
margin-top: 5px; 
}

JAVASCRIPT (가정 당신이 jQuery를 사용하고)

$(document).ready(function(){ 

    $('#fakeDropdown').hover(function(){ 
     $(this).find('#menu').show('fast'); 
    }); 

    $('#fakeDropdown').mouseleave(function(){ 
     $(this).find('#menu').hide('fast'); 
    }); 

});

JSfiddle example

출처

2011-03-18 16:11:35 Hacknightly

1

당신 때문이다 그); CSS의 삼각형 트릭은 추가 비용없이 제공 select 태그 내에 div 태그를 중첩 할 수 없습니다.

구글의 화려한 드롭 다운이 고전 select 요소와 유사한 무언가를 달성하기 위해 적절한 자바 스크립트와 div 요소의 집합입니다, 전혀 select 태그 아니다.

해결하려면 마크 업을 약간 변경해야합니다.

출처

2011-03-18 16:12:51 wsanville

0

검사 경고 (ID)의 값 : 당신은 구글과 같은 드롭 다운이의를 번역하려면

alert(id); 
ddmenuitem = document.getElementById(id);

출처

2011-03-18 16:13:13

관련 문제

 관련 문제