web-dev-qa-db-ja.com

Javascript / jQueryを使用してSelectを開きますか？

Javascript（およびjQuery）を使用して選択ボックスを開く方法はありますか？

<select style="width:150px;">
    <option value="1">1</option>
    <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus.</option>
    <option value="3">3</option>
</select>

つまり、バグの原因を選択して開く必要があります。 IE（6,7,8）のすべてのバージョンがオプションを削減しました。私が知る限り、これに対するcssバグ修正はありません。現時点では、以下を実行しようとしています。

var original_width = 0;
var selected_val = false;

if (jQuery.browser.msie) {
    $('select').click(function(){
        if (selected_val == false){
            if(original_width == 0)
                original_width = $(this).width();

            $(this).css({
                'position' : 'absolute',
                'width' : 'auto'
            });
        }else{
            $(this).css({
                'position' : 'relative',
                'width' : original_width
            });
            selected_val = false;
        }
    });

    $('select').blur(function(){
        $(this).css({
            'position' : 'relative',
            'width' : original_width
        });
    });

    $('select').blur(function(){
        $(this).css({
            'position' : 'relative',
            'width' : original_width
        });
    });

    $('select').change(function(){
        $(this).css({
            'position' : 'relative',
            'width' : original_width
        });
    });

    $('select option').click(function(){
        $(this).css({
            'position' : 'relative',
            'width' : original_width
        });

        selected_val = true;
    });

}

しかし、最初に選択をクリックすると、選択の幅が変更されますが、もう一度クリックして開く必要があります。

javascriptjqueryjavascript-events
27
Newbie

さて、この問題を解決する別の方法を見つけました。修正方法は次のとおりです。

フィードバックをお願いします！私は自分自身に誇りを持っています;）

$(document).ready(function() {
    if (jQuery.browser.msie) {
            select_init();
    }
});


function select_init () {
    var selects = $('select');
    for (var i = 0; i < selects.length; i++) {
        _resizeselect.init(selects[i]);
    }
}


var _resizeselect = {
    obj : new Array(),
    init : function (el) {
        this.obj[el] = new resizeselect (el);
    }
}

function resizeselect (el) {

    this.el = el;
    this.p = el.parentNode;
    this.ht = el.parentNode.offsetHeight;
    var obj = this;
    this.set = false;

    el.onmousedown = function () {
        obj.set_select("mousedown");
    }
    el.onblur = function () {
        obj.reset_select("blur");
    }
    el.onchange = function () {
        obj.reset_select("change");
    }

}

resizeselect.prototype.set_select = function (str) {

    if (this.set) {
        this.set = false;
        return;
    }

    this.el.style.width = "auto";
    this.el.style.position = "absolute";
    this.p.style.height = this.ht + "px";
    this.p.style.zIndex = 100;
    this.set = true;
    this.el.focus();
}

resizeselect.prototype.reset_select = function (str) {
    this.el.style.width = "";
    this.el.style.position = "";
    this.p.style.height = "";
    this.p.style.zIndex = 1;
    this.set = false;
    window.focus();
}
0
Newbie

clickを使用する代わりに、mousedownハンドラーを使用してmousedownイベントをキャプチャできます。 mousedownはclickの前に起動するため、stopPropogationを呼び出してイベントキューを解除できます。

6
jake the snake

私はこれがかなり古くて回答されていることを知っていますが、これはSafariとiOS UIWebViewでうまくいきました-私はそれを隠していますが、別のボタンがクリックされたときに表示して開きたいです。

$('#select-id').show().focus().click();
6
Matt H

これを試して：

dropDown = function (elementId) {
    var dropdown = document.getElementById(elementId);
    try {
        showDropdown(dropdown);
    } catch(e) {

    }
    return false;
};

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

次に、関数を呼び出します。

dropDown('elementId');
2
joseantgv

[〜＃〜] no [〜＃〜]jQueryソリューション。

<SCRIPT>
    function toggleDropdown(element){
        if(element.size == 0) element.size = element.length;
        else element.size = 0;
        }
</SCRIPT>

これを見つけました here 。

1
Harijs Krūtainis

これを試して：

var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);

そしてこれは閉じます：

//close dropdown
myDropDown.attr('size',0);
1
uesports135

イベントハンドラー（クリック、ぼかしなど）からtrueを返す必要があると思うので、ハンドラーの実行後、ブラウザーは引き続きイベントを伝達し、選択を開きます。

Hrefリンクについても同様です。onclickハンドラーがあり、ハンドラーがfalseを返す場合、リンクは追跡されません（ハンドラーの実行後にブラウザーがイベントを停止します）。

編集：コメントと回答に基づいて、ブラウザーがボックスを開くことを決定した後にのみ、ハンドラーが最初に実行される可能性があるようです。
focusイベントハンドラーを試すことをお勧めします。clickハンドラーよりも早く、おそらくブラウザーが実際にボックスを開く前に実行される可能性があります。また、より一貫性があります（マウスとキーボードの両方のナビゲーションに適用されます）。

1
Yoni

まず、IEでこの制限の痛みを感じます。それは私のために働いているようだので、私もこれを共有すると思った。私はほとんど同じアプローチをとりましたが、選択要素ごとです。私の場合、どのリストに長いデータが含まれているかがわかります。

選択要素を絶対にするのではなく、外観を一貫させる必要があるため、それらをインラインに保持し、DIVで非表示のオーバーフローでラップします。また、IEおよび幅が現在の幅よりも大きい。

これをすべての選択ボックスに使用するには、次のようなものを使用できます。

$("select").each(function(){ 
        $(this).IELongDropDown(); 
     });

または明らかに、IDごとの要素ごとに。 jqueryプラグインは次のとおりです。

(function($) {
    $.fn.IELongDropDown = function(cln) {
        if (jQuery.browser.msie) { //only IE has problems with long select boxes
            var el = this;
            var previousWidth = el.width();
            var divWrapper = "<div style='padding:0;margin:0;overflow:hidden;width:"+ previousWidth +"px'></div>";
            el.wrap(divWrapper);
            var newWidth = el.width("auto").width();
            el.width(previousWidth);
            if(newWidth > previousWidth) {
                el.bind("mousedown", function(){ return el.width("auto").focus(); }); 
                el.bind("blur", function(){ return el.width(previousWidth); });
                el.bind("change", function(){ return el.width(previousWidth); });
            }
        }
        return this;
    };
})(jQuery);

これが誰かを助けることを願って

1
Brendan Kowitz

選択リストを開くことはできませんが、クリックまたは選択したいその他のイベントで選択リストのサイズを変更することにより、選択リストを開くことができます

        $("#drpdwn").mousedown(bodyevent);
        function bodyevent()
        {
            console.log("size changed");
            $(this).attr('size',3);
        }
        $("#drpdwn").focus(function()
        {
            //alert("txt  clicked from ");
            var $el = $("#drpdwn");
            var offset = $el.offset();
            var event = jQuery.Event( "mousedown", {
                which: 1,
                pageX: offset.left,
                pageY: offset.top
            });
            $el.trigger(event);
        });
0
Vishal

Mousedownイベントは、クリックイベントの前に発生します。

  1. 最初のmousedown raise->幅を 'auto'に設定します（ドロップダウンの状態が 'close'の場合）
  2. 上げる->ドロップダウンの状態を変数に保存する：「開く」
  3. 値を選択すると、2番目のマウスダウンが発生します。
  4. レイズ->ドロップダウンの元の幅を復元し、変数の状態を 'close'に変更する必要があります

ユーザーがドロップダウンの外側をクリックした場合、ドロップダウンを閉じるにはblurイベントとchangeイベントが必要です。

ここで、ブレンダンのコードを使用した完全なソリューション：

(function ($) {
var open = {}
$.fn.IELongDropDown = function (cln) {
    if (jQuery.browser.msie) { //only IE has problems with long select boxes
        var el = this;
        var id = el.attr('id');
        var margin = 2; //Need to set a margin however the arrow is cut
        var previousWidth = el.width() + margin;
        var divWrapper = "<div style='padding:0;margin:0;overflow:hidden;width:" + previousWidth + "px'></div>";
        el.wrap(divWrapper);
        var newWidth = el.width("auto").width();
        el.width(previousWidth);
        if (newWidth > previousWidth) {
            el.mousedown(function () {
                if (!open[id]) {
                    el.width("auto");
                    el.focus();
                }
            });
            el.click(function () {
                if (!open[id])
                    open[id] = true;
                else {
                    open[id] = false;
                    return el.width(previousWidth);
                }
            });
            el.blur(function () {
                open[id] = false;
                return el.width(previousWidth);
            });
            el.change(function () {
                open[id] = false;
                return el.width(previousWidth);
            });
        }
    }
    return this;
};
})(jQuery);

関数を呼び出します：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#mydropdownlist').IELongDropDown();
    });
</script>
0
Jni

CSSをCSSファイルに設定してから「addClass」を設定したいのですが、それでもコード（部分）は

   $('select').blur(function(){ 
        $(this).css({ 
            'position' : 'relative', 
            'width' : original_width 
        }); 
    }); 

    $('select').blur(function(){ 
        $(this).css({ 
            'position' : 'relative', 
            'width' : original_width 
        }); 
    });

重複しているようです

私はそれを作ります：

$('select').blur().css({ 
        'position' : 'relative', 
        'width' : original_width 
});

.change（）イベントで.blur（）が本当に必要かどうかわからない（問題を解決できるかどうかを確認してみてください... IE問題はないようです。

0
Mark Schultheiss