HTML のこのドロップダウンリストの場合:
<select id="countries">
<option value="1">Country</option>
</select>
リストを開きたい (左クリックと同じ)。これは JavaScript (より具体的には jQuery) を使用して可能ですか?
160266 次
14 に答える
72
私は同じものを見つけようとしていて、がっかりしました。選択ボックスの属性サイズを変更して、開いているように見えるようになりました
$('#countries').attr('size',6);
そして、あなたが終わったら
$('#countries').attr('size',1);
于 2010-12-21T10:36:06.200 に答える
18
要素のクリックを簡単にシミュレートできますが、要素をクリックし<select>てもドロップダウンは開きません。
複数の選択を使用すると、問題が発生する可能性があります。おそらく、必要に応じて拡張および縮小できるコンテナ要素内のラジオ ボタンを検討する必要があります。
于 2008-12-11T18:59:22.617 に答える
15
私は同じ問題に遭遇し、解決策があります。「選択」要素でのマウス クリックをエミュレートする ExpandSelect() という関数。これは、属性<select>を設定することで絶対に配置され、一度に複数のオプションが表示される別の要素を作成することによって実行されます。sizeChrome、Opera、Firefox、Internet Explorer のすべての主要ブラウザでテスト済み。それがどのように機能するかの説明とコードは次のとおりです。
編集 (リンクが切れていました) .
Google Code でプロジェクトを作成しました。そこにあるコードを参照してください。
http://code.google.com/p/expandselect/
スクリーンショット
クリックをエミュレートするときに GUI に少し違いがありますが、実際には問題ではありません。自分の目で確かめてください。
マウスクリック時：
(ソース: googlecode.com )
クリックをエミュレートするとき：
(ソース: googlecode.com )
プロジェクトのウェブサイトのその他のスクリーンショット、上記のリンク。
于 2011-11-09T19:22:12.390 に答える
10
これはそれをカバーする必要があります：
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);
});
于 2014-10-10T10:57:16.787 に答える
9
これは、上記の回答から作成されたもので、オプションの長さ/数を使用して、実際のオプションの数に準拠しています。
これが誰かが必要な結果を得るのに役立つことを願っています!
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();
}
于 2012-06-01T04:53:21.393 に答える
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");
}
IDを修正値に変更してください。賢くはありませんが、アイデアが表示されることを願っています。
于 2012-01-19T20:33:43.813 に答える
4
JavaScript で要素を「クリック」することはできません (添付onclickイベントをトリガーすることはできますが、文字通りクリックすることはできません)。
リスト内のすべてのアイテムを表示するには、リストをリストにしてmultiple、次のようにサイズを大きくします。
<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
于 2008-12-11T18:51:46.360 に答える
2
これが答えないことの1つは、size = nを実行して絶対位置にした後、選択リストのオプションの1つをクリックするとどうなるかということです。
ぼかしイベントによりサイズ=1になり、外観に戻るため、次のようなものも必要です。
$("option").click(function(){
$(this).parent().blur();
});
また、絶対位置の選択リストが他の要素の後ろに表示されることに問題がある場合は、
z-index: 100;
またはselectのスタイルでそのようなもの。
于 2012-05-02T18:30:23.517 に答える
2
超簡単：
var state = false;
$("a").click(function () {
state = !state;
$("select").prop("size", state ? $("option").length : 1);
});
于 2013-05-25T12:41:22.923 に答える
2
いいえ、できません。
サイズを変更して大きくすることもできます... 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>
于 2008-12-11T19:20:03.433 に答える
2
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();
}
于 2012-04-19T19:06:25.937 に答える
1
<select>既に述べたように、 JavaScript を使用してプログラムで開くことはできません。
<select>ただし、ルック アンド フィール全体を自分で管理するように記述することもできます。GoogleやYahoo!のオートコンプリート検索用語で見られるようなものです。またはThe Weather Networkの Search for Location ボックス。
ここでjQuery用のものを見つけました。それがあなたのニーズを満たすかどうかはわかりませんが、あなたのニーズを完全に満たしていなくても、他のアクションやイベントの結果として開くように変更できるはずです. これは実際にはより有望に見えます。
于 2008-12-11T19:15:04.520 に答える
0
私はちょうど追加しました
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を重ねる）
于 2016-12-13T09:06:03.973 に答える
-1
たぶん遅いかもしれませんが、これは私がそれを解決した方法です: 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');
}
于 2013-08-20T09:02:46.967 に答える