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

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

HTML 선택 태그로는이 작업을 수행 할 수 없지만 JavaScript 및 HTML로 수행 할 수 있습니다 . 이를 수행하는 기존의 다양한 컨트롤이 있습니다. 예를 들어 SO "관심 / 무시 태그"항목에 첨부 된 "제안"목록 또는 이메일 주소에 대한 Gmail 조회 등이 있습니다.

이 기능을 제공하는 JavaScript + HTML 컨트롤이 많이 있습니다. 아이디어에 대한 자동 완성 컨트롤을 찾으십시오.

자동 완성 컨트롤은이 링크를 참조하십시오 ... http://ajaxcontroltoolkit.codeplex.com/

다른 사람들이 그렇지 않다고 말하는 모든 곳에서도 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이 아닌 동일한 작업을 수행하는 방법을 찾으면 이 바이올린을 자유롭게 수정하십시오 .

Xavier Ho의 답변은 현재 대부분의 브라우저에서 문제를 해결하는 방법을 다루고 있습니다. 그러나 더 이상 JavaScript로 이벤트를 '파견 / 수정하지 않는'것이 좋습니다 . ( mousedown이 경우 처럼 )

버전 53 이상부터 Google 크롬 은 신뢰할 수없는 이벤트에 대해 기본 작업을 수행하지 않습니다 . 스크립트에 의해 생성 또는 수정되거나 dispatchEvent메소드 를 통해 전달되는 이벤트와 같은 . 이 변경 사항은 이미 작업을 수행하지 않는 것으로 생각되는 Firefox 및 IE에 맞추기위한 것입니다.

테스트 목적으로 Fiddle 은 Xavier의 답변이 Chrome 53 이상에서 작동하지 않습니다. (나는 FF와 IE를 테스트하지 않습니다).

참조 링크 :

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

그리고 initMouseEvent도 더 이상 사용되지 않습니다.

이것은 내가 얻을 수있는 가장 가까운 것입니다. onmouseover 요소의 크기를 변경하고 onmouseout 크기를 복원합니다.

       <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>

나는이 같은 문제를 가지고 있으며 이것이 html과 css를 사용하여 해결하기 위해 찾은 쉬운 방법입니다.

select{
  opacity: 0;
  position: absolute;
}

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

Chrome에서는 더 이상 불가능하다고 생각합니다.

크롬 버전 53은 Asim K T가 언급 한대로이 기능을 비활성화하는 것 같습니다.

사양에 따르면 http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

신뢰할 수있는 이벤트는 기본 작업을 실행하지 않아야합니다 (클릭 이벤트 제외).

그러나 그들은 webview에서 그것을 활성화했지만 이것을 테스트하지는 않았습니다.

일부 웹뷰는 내부에서 fastclick을 사용하고 있으며 파손 위험으로 인해 신뢰할 수없는 경우에도 마우스 다운을 허용 할 것입니다.

그리고이 토론 에서 개발자가 프로그래밍 방식으로 드롭 다운을 열 수 있도록하는 아이디어는 포기되었습니다.

누군가 여전히 이것을 찾고 있다면 :

<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; });
});

최신 정보:

이 문제에 대한 완벽한 해결책이 없을 때까지 하나, 그러나이 시나리오를 피할 수 있습니다. 왜 이것을하고 싶은가. 모바일 장치 용 플러그인을 선택하기 위해 몇 달 전에 솔루션을 찾고있었습니다.

https://github.com/HemantNegi/jquery.sumoselect

마지막으로 사용자와 직접 상호 작용할 수 있도록 사용자 정의 div (또는 다른 요소)를 투명한 선택 요소로 마스킹했습니다.

내가 찾은 가장 좋은 방법은 다음과 같습니다. 참고 Windows의 IE에서만 작동하며 셸에 액세스하기 때문에 웹이 보안 영역에 있어야합니다. 트릭은 ALT- 아래쪽 화살표가 선택 드롭 다운을 여는 바로 가기 키라는 것입니다.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

당신이 원할 때 한 가지는 불가능하다고 생각하지 마십시오.

남자가 만든이 확장 JS 기능을 사용하십시오.

http://code.google.com/p/expandselect/

이 JS를 포함하고 다음과 같이 매개 변수를 선택 ID로 전달하는 호출하십시오.

ExpandSelect(MySelect)

내가 틀렸을 수도 있지만 기본 선택 상자에서 가능하다고 생각하지 않습니다. 원하는 결과를 얻는 JS 및 CSS로 무언가를 할 수 있지만 (내 지식으로는) 바닐라 SELECT가 아닙니다.

"HTML 선택"을 여는 것은이 질문에 언급 된 몇 가지 해결 방법과 유사한 해결 방법을 통해 가능합니다. 그러나 이렇게하는 더 깨끗한 방법은 "select2"또는 "chosen"과 같은 선택 라이브러리를 프로젝트에 추가하는 것입니다. 예를 들어 select2를 프로그래밍 방식으로 여는 것은 다음과 같이 쉽습니다.

$('#target-select').select2('open');

이것은 정확히 당신이 요구 한 것은 아니지만 단순함 때문에이 솔루션을 좋아합니다. 드롭 다운을 시작하려는 대부분의 경우 사용자가 실제로 선택했는지 확인하고 있기 때문입니다. 드롭 다운의 크기를 변경하고 초점을 맞추면 건너 뛴 내용이 멋지게 강조됩니다.

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();