jQuery를 사용하여 드롭 다운 목록을 열 수 있습니까?

jQuery를 사용하여 드롭 다운 목록을 열 수 있습니까?

---

HTML의 드롭 다운 목록 :

<select id="countries">
<option value="1">Country</option>
</select>

목록을 열고 싶습니다 (왼쪽 클릭과 동일). JavaScript (또는 좀 더 구체적으로 jQuery)를 사용하여 가능합니까?

---

요소 클릭을 쉽게 시뮬레이션 할 수 있지만을 클릭 <select>해도 드롭 다운이 열리지 않습니다.

다중 선택을 사용하는 것은 문제가 될 수 있습니다. 필요에 따라 확장 및 축소 할 수있는 컨테이너 요소 내부의 라디오 버튼을 고려해야합니다.

---

나는 똑같은 것을 찾으려고했지만 실망했다. 선택 상자의 속성 크기를 변경하여 열리는 것처럼 보였습니다.

$('#countries').attr('size',6);

그리고 완료되면

$('#countries').attr('size',1);

---

나는 같은 문제를 만났고 해결책이 있습니다. "select"요소를 마우스로 클릭하는 것을 에뮬레이트하는 ExpandSelect ()라는 함수 <select>는 size속성 을 설정하여 한 번에 여러 옵션을 볼 수 있고 절대적으로 위치 하는 또 다른 요소를 생성하여 수행 합니다. Chrome, Opera, Firefox, Internet Explorer 등 모든 주요 브라우저에서 테스트되었습니다. 작동 방식에 대한 설명과 여기 코드 :

편집 (링크가 끊어짐) .

Google 코드에서 프로젝트를 만들었습니다. 거기에서 코드를 찾으십시오.

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

스크린 샷

클릭을 에뮬레이션 할 때 GUI에는 약간의 차이가 있지만 실제로는 중요하지 않습니다. 직접 확인해보십시오.

마우스 클릭시 :

_{(출처 : googlecode.com )}

클릭을 에뮬레이션 할 때 :

_{(출처 : googlecode.com )}

프로젝트 웹 사이트의 더 많은 스크린 샷, 위 링크.

---

이것은 그것을 다룹니다.

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var

예를 들어 키 누르기 이벤트에 바인딩 될 수 있으므로 요소에 포커스가있을 때 사용자가 입력 할 수 있으며 자동으로 확장됩니다.

--문맥--

  modal.find("select").not("[readonly]").on("keypress", function(e) {

     if (e.keyCode == 13) {
         e.preventDefault();
         return false;
     }
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     this.dispatchEvent(event);
 });

---

이것은 바로 위의 답변에서 뽑아 낸 것이며 옵션의 길이 / 수를 사용하여 실제로 얼마나 많은 옵션이 있는지 확인합니다.

누군가가 필요한 결과를 얻는 데 도움이되기를 바랍니다.

    function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

---

간단하고 쉬운 방법입니다.

function down(what) {
  pos = $(what).offset();  // remember position
  $(what).css("position","absolute");
  $(what).offset(pos);   // reset position
  $(what).attr("size","10"); // open dropdown
}

function up(what) {
$(what).css("position","static");
$(what).attr("size","1");  // close dropdown
}

이제 이렇게 DropDown을 호출 할 수 있습니다.

<select onfocus="down(this)" onblur="up(this)">

나를 위해 완벽하게 작동합니다.

페이지에서 다른 요소의 위치에 문제가 없기 때문에 더 좋을 것입니다.

function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}

function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}

ID를 고정 값으로 변경하십시오 mybe 똑똑하지는 않지만 idee를 보길 바랍니다.

---

당신은 할 수 없습니다.

크기를 변경하여 더 크게 만들 수 있습니다. Dreas 아이디어와 비슷하지만 변경해야하는 크기입니다.

<select id="countries" size="6">
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
  <option value="4">Country 4</option>
  <option value="5">Country 5</option>
  <option value="6">Country 6</option>
</select>

---

자바 스크립트가 요소를 "클릭"하는 것은 불가능합니다 (첨부 된 onclick이벤트를 트리거 할 수는 있지만 말 그대로 클릭 할 수는 없습니다).

목록의 모든 항목을 보려면 다음과 같이 목록을 목록으로 만들고 multiple크기를 늘립니다.

<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>

---

나는 mrperfect의 대답을 사용해 보았고 몇 가지 결함이있었습니다. 몇 가지 작은 변화를 통해 저를 위해 작동하도록 만들 수있었습니다. 한 번만 할 수 있도록 변경했습니다. 드롭 다운을 종료하면 일반적인 드롭 다운 방법으로 돌아갑니다.

function down() {
    var pos = $(this).offset(); // remember position
    $(this).css("position", "absolute");
    $(this).offset(pos);   // reset position
    $(this).attr("size", "15"); // open dropdown
    $(this).unbind("focus", down);
}
function up() {
    $(this).css("position", "static");
    $(this).attr("size", "1");  // close dropdown
    $(this).unbind("change", up);
}
function openDropdown(elementId) {
    $('#' + elementId).focus(down).blur(up).focus();
}

---

이것이 대답하지 않는 한 가지는 크기 = n을 수행하고 절대 위치를 지정한 후 선택 목록의 옵션 중 하나를 클릭하면 발생하는 일입니다.

흐림 이벤트는 크기를 1로 만들고 모양으로 다시 변경하기 때문에 다음과 같은 것도 있어야합니다.

$("option").click(function(){
    $(this).parent().blur();
});

또한 다른 요소 뒤에 표시되는 절대 위치 선택 목록에 문제가있는 경우

z-index: 100;

또는 선택의 스타일과 비슷한 것.

---

매우 간단합니다.

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});

---

앞서 언급했듯이 <select>JavaScript를 사용하여 프로그래밍 방식으로 열 수 없습니다 .

그러나 <select>전체 모양을 관리하고 자신을 느낄 수 있습니다. Google 또는 Yahoo! 에서 자동 완성 검색어에 대해 표시되는 것과 같은 것입니다. 또는 날씨 네트워크 에서 위치 검색 상자를 클릭 합니다 .

여기 에서 jQuery에 대한 하나를 찾았 습니다 . 나는 그것이 당신의 요구를 충족 시킬지 모르겠지만 그것이 당신의 요구를 완전히 충족시키지 못하더라도 다른 행동이나 이벤트의 결과로 열리도록 수정할 수 있어야합니다. 이것은 실제로 더 유망 해 보입니다.

---

늦었을 수도 있지만 이것이 내가 해결 한 방법입니다. http://jsfiddle.net/KqsK2/18/

$(document).ready(function() {
  fixSelect(document.getElementsByTagName("select"));
                      });                       

   function fixSelect(selectList)
            {
            for (var i = 0; i != selectList.length; i++)
              {

                 setActions(selectList[i]);
              }
            }


   function setActions(select)
            {
               $(select).click(function() {
                   if (select.getElementsByTagName("option").length == 1)
                        {
                          active(select);
                        }
                      });
                $(select).focus(function() {
                       active(select);
                       });
                $(select).blur(function() {
                       inaktiv(select);
                       });
                $(select).keypress(function(e) {
                      if (e.which == 13) {

                      inaktiv(select);
                          }
                       });
                  var optionList = select.getElementsByTagName("option");

                  for (var i = 0; i != optionList.length; i++)
                           {
                                setActionOnOption(optionList[i], select);
                           }
      }

  function setActionOnOption(option, select)
      {
                    $(option).click(function() {
                                inaktiv(select);
                        });
      }

  function active(select)
      {
          var temp = $('<select/>');
              $('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
               $(temp).insertBefore($(select));

              $(select).attr('size', select.getElementsByTagName('option').length);
              $(select).css('position', 'absolute');
              $(select).css('margin-top', '-6px');
              $(select).css({boxShadow: '2px 3px 4px #888888'});



                        }

        function inaktiv(select)
                   {
                 if($(select).parent().children('select').length!=1)
                     {
                                             select.parentNode.removeChild($(select).parent().children('select').get(0));
                                }
                $(select).attr('size', 1);
                $(select).css('position', 'static');
                $(select).css({boxShadow: ''});
                $(select).css('margin-top', '0px');

                  }

---

나는 방금 추가했다

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

선택에 추가

onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"

고전적인 것과 같은 모양을 만들기 위해 (나머지 html과 겹쳐서)

참고 URL : https://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery