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

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

HTML의 이 드롭다운 목록의 경우:

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

(왼쪽 클릭과 동일하게) 목록을 열고 싶습니다.이것이 자바스크립트(또는 더 구체적으로 jQuery)를 사용하여 가능합니까?

저도 같은 걸 찾으려고 하다가 실망했어요.선택 상자의 속성 크기를 변경하여 열려 있는 것처럼 보입니다.

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

그리고 당신이 끝나면,

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

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

여러 번 선택하면 문제가 발생할 수 있습니다.필요에 따라 확장 및 축소할 수 있는 컨테이너 요소 내부의 라디오 버튼을 고려해야 할 것입니다.

저도 같은 문제를 발견했고 해결책이 있습니다.ExpandSelect은 "하는 것을 으로, ExpandSelect()라는 ExpandSelect() 기능을 .<select>고을볼수를다에러를etgetty로se고ys수dde러볼을tsize 주요 : Explorer크롬, 오페라, 파이어폭스, 인터넷 익스플로러 익스플로러 , explan ation it works of : here 크롬 how , with the code along , 파이어폭스 , 오페라 인터넷작동 방식에 대한 설명 및 여기 코드:

편집(링크가 끊겼습니다).

구글 코드에서 프로젝트를 만들었으니 거기서 코드를 찾아보세요.

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를 수정 값으로 변경하지만 당신이 그 아이디어를 볼 수 있기를 바랍니다.

요소에서 javascript를 "클릭"할 수 없습니다(첨부된 내용을 트리거할 수 있습니다).onclickevent, 하지만 말 그대로 클릭할 수는 없습니다.)

목록의 모든 항목을 보려면 목록을 다음과 같이 만듭니다.multiple다음과 같이 목록을 작성하고 크기를 늘립니다.

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

아니, 그럴 수 없다.

사이즈를 크게 변경할 수 있습니다...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>

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

상술한 바와 같이, 당신은 프로그램적으로 a를 열 수 없습니다.<select>자바스크립트를 이용해서.

하지만 전체적인 모습을 관리하는 자신만의 글을 쓸 수도 있고, 자신을 느낄 수도 있습니다.Google 또는 Yahoo!의 자동 완성 검색어나 The Weather Network의 Search for Location(위치 검색) 상자에서 볼 수 있는 것과 같은 것입니다.

여기서 jQuery에게 줄 것을 찾았습니다.고객님의 요구에 부응할지는 모르겠지만, 고객님의 요구에 완전히 부응하지 못하더라도 다른 조치나 이벤트의 결과로 열릴 수 있도록 수정이 가능할 것입니다.사실 이게 더 유망해 보입니다.

방금 추가했습니다.

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)

늦었을 수도 있지만, 이것이 제가 해결한 방법입니다: 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');

                  }

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