web-dev-qa-db-ja.com

jQueryを使用してドロップダウンリストを開くことはできますか

HTMLのこのドロップダウンリストの場合：

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

リストを開きたい（リストを左クリックするのと同じ）。これはJavaScript（またはより具体的にはjQuery）を使用して可能ですか？

jqueryhtmldrop-down-menu
79
Jon Tackabury

簡単に 要素のクリックをシミュレート できますが、<select>はドロップダウンを開きません。

複数の選択を使用すると、問題が生じる可能性があります。おそらく、必要に応じて展開および縮小できるコンテナ要素内のラジオボタンを検討する必要があります。

15
ieure

私は同じものを見つけようとしていたが、がっかりした。選択ボックスの属性サイズを変更して、開いているように見えるようにしました

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

そして、あなたが終わったら

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

私は同じ問題に遭遇し、解決策があります。 「select」要素のマウスクリックをエミュレートするExpandSelect（）と呼ばれる関数は、絶対に位置付けられ、size属性を設定することで一度に複数のオプションが表示される別の<select>要素を作成します。すべての主要ブラウザでテスト済み：Chrome、Opera、Firefox、Internet Explorer。動作の説明とコードは次のとおりです。

編集（リンクが壊れました）.

Google Codeでプロジェクトを作成しました。そこでコードを探します：

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

スクリーンショット

クリックをエミュレートするときのGUIには少し違いがありますが、実際には問題ではありません。自分で確認してください。

マウスクリック時：

MouseClicking
（ソース： googlecode.com ）

クリックをエミュレートする場合：

EmulatingClicking
（ソース： googlecode.com ）

プロジェクトのウェブサイトのその他のスクリーンショット、上記のリンク。

15
Czarek Tomczak

これでカバーできます：

 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

これは、たとえばkeypressイベントにバインドできるため、要素にフォーカスがある場合、ユーザーは入力でき、自動的に展開されます...

- 状況 - 

  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);
 });
9
Stuart.Sklinar

これは、上記の回答から整理され、オプションの長さ/数を使用して、実際に存在するオプションの数に適合します。

これが誰かが必要な結果を得るのに役立つことを願っています！

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

シンプルで簡単な方法。

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を修正値に変更してください。

5
mrperfect

Javascriptが要素を「クリック」することはできません（uは添付のonclickイベントをトリガーできますが、文字通りクリックすることはできません）

リスト内のすべてのアイテムを表示するには、リストをmultipleリストにして、次のようにサイズを増やします。

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

超シンプル：

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

いいえ、できません。

サイズを変更して大きくすることができます... 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>
2
scunliffe

これに答えられないことの1つは、サイズ= nにして絶対位置にした後、選択リストのオプションの1つをクリックするとどうなるかということです。

Blurイベントはサイズを1に設定し、外観を元に戻すため、このようなものも必要です。

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

また、他の要素の背後に表示される絶対配置選択リストに問題がある場合は、

z-index: 100;

またはセレクトのスタイルでそのような何か。

2
vipergtsrz

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

前述のように、JavaScriptを使用してプログラムで<select>を開くことはできません。

ただし、独自の<select>を記述して、ルックアンドフィール全体を管理することもできます。 Google または Yahoo！ のオートコンプリート検索用語、または The Weather Network のSearch for Locationボックスに表示されるもののようなもの。

JQuery here の1つを見つけました。それがあなたのニーズを満たすかどうかはわかりませんが、あなたのニーズを完全に満たしていない場合でも、他のアクションやイベントの結果として開くように変更することができるはずです。 これ 実際にはより有望に見えます。

1
Grant Wagner

遅れるかもしれませんが、これは私がそれを解決した方法です： 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');

                  }
0
Johan Nordli

私はちょうど追加しました

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の残りの部分を重ねる）

0
Emmanuel