[javascript] 프로그래밍 방식으로 HTML SELECT에 드롭 다운을 지시하는 방법 (예 : 마우스 오버로 인해)

다른 사람들이 그렇지 않다고 말하는 모든 곳에서도 HTML + Javascript로 실제로 가능했지만 나중에 더 이상 사용되지 않으며 지금은 작동하지 않습니다.

그러나 이것은 Chrome에서만 작동했습니다. 관심이 있으시면 더 읽어보십시오.

에 따르면 HTML5 절 3.2.5.1.7에 대한 W3C 작업 초안. 인터랙티브 콘텐츠 :

HTML의 특정 요소에는 활성화 동작이 있으므로 사용자가 활성화 할 수 있습니다. 이렇게하면 활성화 메커니즘 […] 에 따라 일련의 이벤트가 트리거됩니다 ( 예 : 키보드 또는 음성 입력 사용 또는 마우스 클릭) .

사용자가 클릭하는 것 이외의 방식으로 정의 된 활성화 동작으로 요소를 트리거하는 경우 상호 작용 이벤트의 기본 동작은 요소에서 합성 클릭 활성화 단계 를 실행하는 것이어야합니다 .

<select>인터랙티브 콘텐츠이기 때문에 <option>s 를 프로그래밍 방식으로 표시 할 수 있다고 믿었습니다 . 몇 시간 동안 놀다가 사용 document.createEvent()하고 .dispatchEvent()작동 한다는 것을 발견했습니다 .

즉, 데모 시간입니다. 다음은 작동하는 Fiddle입니다.

HTML :

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

자바 스크립트 :

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () {
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

누구든지 Chrome이 아닌 동일한 작업을 수행하는 방법을 찾으면 이 바이올린을 자유롭게 수정하십시오 .

답변

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

var is_visible=false;

$(document).ready(function(){

    $('#fire').click(function (e) {
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});