복붙노트

[JQUERY] 내가 jQuery를 사용하여 드롭 다운리스트를 열 수

JQUERY

내가 jQuery를 사용하여 드롭 다운리스트를 열 수

해결법

  1. 1.당신은 쉽게 요소에 클릭을 시뮬레이션 할 수 있지만에 클릭하세요 드롭 다운을 열리지 않습니다 <선택>.

    당신은 쉽게 요소에 클릭을 시뮬레이션 할 수 있지만에 클릭하세요 드롭 다운을 열리지 않습니다 <선택>.

    여러 선택을 사용하면 문제가 될 수 있습니다. 아마 당신은 필요에 따라 확장하고 계약 할 수있는 컨테이너 요소 내부에 라디오 버튼을 고려해야합니다.

  2. 2.나는 같은 일을 찾기 위해 노력하고 실망되었다. 나는 열 나타나도록 선택 상자에 대한 속성의 크기를 변경 결국

    나는 같은 일을 찾기 위해 노력하고 실망되었다. 나는 열 나타나도록 선택 상자에 대한 속성의 크기를 변경 결국

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

    다음이 끝나면

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

  3. 3.저도 같은 문제를 건너했고 나는 해결책을 가지고 있습니다. 에 에뮬레이트 마우스 클릭이 요소를 "선택"고 ExpandSelect (라는 기능), 그것은 절대적으로 posioned 및 크기 속성을 설정하여 한 번에 볼 수 여러 옵션을 가지고하는 또 다른 <선택> 요소를 생성하여 그렇게. 크롬, 오페라, 파이어 폭스, 인터넷 익스플로러 : 모든 주요 브라우저에서 테스트. 이 여기에 코드와 함께 작동하는 방법의 설명 :

    저도 같은 문제를 건너했고 나는 해결책을 가지고 있습니다. 에 에뮬레이트 마우스 클릭이 요소를 "선택"고 ExpandSelect (라는 기능), 그것은 절대적으로 posioned 및 크기 속성을 설정하여 한 번에 볼 수 여러 옵션을 가지고하는 또 다른 <선택> 요소를 생성하여 그렇게. 크롬, 오페라, 파이어 폭스, 인터넷 익스플로러 : 모든 주요 브라우저에서 테스트. 이 여기에 코드와 함께 작동하는 방법의 설명 :

    편집 (링크가 깨진했다).

    나는 거기에 코드를 이동 Google 코드에서 프로젝트를 만들었습니다 :

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

    이 클릭을 모방 GUI에 약간의 차이가 있지만, 정말 문제, 자신을 위해 그것을 볼 수 없습니다 :

    때 마우스 클릭 :

    (출처 : googlecode.com)

    때 클릭을 모방 :

    (출처 : googlecode.com)

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

  4. 4.이것은을 포함한다 :

    이것은을 포함한다 :

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

  5. 5.이것은 단지 위의 답변에서까지 깔끔하게 실제로 얼마나 많은 옵션이 준수 할 수있는 옵션의 길이 / 수를 사용합니다.

    이것은 단지 위의 답변에서까지 깔끔하게 실제로 얼마나 많은 옵션이 준수 할 수있는 옵션의 길이 / 수를 사용합니다.

    희망이 누군가가 그들이 필요로하는 결과를 얻을 수 있습니다!

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

  6. 6.쉽게 간단한.

    쉽게 간단한.

    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
}

    이제 당신은이처럼 드롭 다운을 호출 할 수 있습니다

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

    수정 값 mybe에 ID를 변경 스마트하지만 난 당신이 IDEE를 참조 바랍니다 없습니다.

  7. 7.그것은 요소의 "클릭"을 자바 스크립트를 할 수 없습니다 (U 첨부 온 클릭 이벤트를 트리거 할 수 있지만 문자 그대로를 클릭 할 수 없습니다)

    그것은 요소의 "클릭"을 자바 스크립트를 할 수 없습니다 (U 첨부 온 클릭 이벤트를 트리거 할 수 있지만 문자 그대로를 클릭 할 수 없습니다)

    목록에있는 모든 항목을 보려면 목록을 여러 목록을 작성 및 같은 크기를 증가 :

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

  8. 8.아니 당신은 할 수 없습니다.

    아니 당신은 할 수 없습니다.

    당신은 드레스의 아이디어가 큰 ... 유사하게 크기를 변경할 수 있습니다, 그러나 당신이 변화를 필요로하는 크기입니다.

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

  9. 9.나는 mrperfect의 답변을 사용하여 시도와 나는 몇 결함이 있었다. 몇 가지 작은 변화와 함께, 나를 위해 일에 그것을 얻을 수 있었다. 난 그냥 한 번만 할 것 있도록 변경. 당신이 드롭 다운 종료되면, 드롭 다운의 일반적인 방법으로 돌아 갈 것입니다.

    나는 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();
}

  10. 10.이가하는 것은하지 대답은 당신이 당신의 크기를 완료 한 후에는 선택 목록에있는 옵션 중 하나를 클릭 할 때 발생하는 것입니다 = N과 절대 위치했다.

    이가하는 것은하지 대답은 당신이 당신의 크기를 완료 한 후에는 선택 목록에있는 옵션 중 하나를 클릭 할 때 발생하는 것입니다 = N과 절대 위치했다.

    흐림 이벤트가 그것의 크기 = 1을하고 어떻게 보이는지에 다시 변경하기 때문에, 당신은뿐만 아니라 이런 식으로 뭔가를해야한다

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

    당신이 다른 요소 뒤에 보여주는 절대 위치 선택 목록에 문제가있는 경우 또한, 단지를 넣어

    z-index: 100;

    또는 선택의 스타일처럼 뭔가.

  11. 11.슈퍼 간단한 :

    슈퍼 간단한 :

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

  12. 12.언급 한 바와 같이, 당신은 프로그래밍 자바 스크립트를 사용하여이 <선택> 열 수 없습니다.

    언급 한 바와 같이, 당신은 프로그래밍 자바 스크립트를 사용하여이 <선택> 열 수 없습니다.

    그러나, 당신은 자신이 <선택> 쓰기 전체 모양을 관리하고 자신을 느낄 수 있었다. 당신이 구글이나 야후에 자동 완성 검색어에 대해 무엇을보고 같은 뭔가 또는 날씨 네트워크에서 위치 검색 상자.

    여기 jQuery를 하나 발견했다. 나는 당신의 필요를 충족 것이라는 생각이 없지만, 완전히 당신의 필요를 충족하지 않는 경우에도이 다른 작업 또는 이벤트의 결과로 열 것이다, 그래서 그것을 수정할 수 있어야한다. 이 사람은 실제로 더 유망 보인다.

  13. 13.난 그냥 추가

    난 그냥 추가

    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의 나머지를 중첩)

  14. 14.나는 그것을 해결하는 방법을 어쩌면 늦게, 그러나 이것은이다 : http://jsfiddle.net/KqsK2/18/

    나는 그것을 해결하는 방법을 어쩌면 늦게, 그러나 이것은이다 : 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');

                  }

    15. from https://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 아이폰 OS 6 Safari는 아약스 결과 $를 캐싱되어 있습니까?  (0) 2020.10.02
[JQUERY] 필수 필드 검증 JQuery와 팝업 MVC 4에서 작동하지  (0) 2020.10.02
[JQUERY] 의 jQuery .load () 호출은로드 된 HTML 파일에서 자바 스크립트를 실행하지 않습니다  (0) 2020.10.02
[JQUERY] ID가 점을 포함하는 경우 어떻게 jQuery로 ID로 HTML 노드를 선택하려면?  (0) 2020.10.02
[JQUERY] 사업부에 매 3 명 div가 랩  (0) 2020.10.02
,

티스토리툴바