javascript - Javascript/jQuery を使用して Select を開きますか?

Question

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 のバグが原因で、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;
    });

}

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

を使用する代わりに、ハンドラを使用してイベントをキャプチャclickできます。の前に発生するため、イベントキューを中断するために呼び出すことができます。mousedownmousedownmousedownclickstopPropogation

score 6 · Accepted Answer

これを試して：

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

そしてこれを閉じます：

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

score 4 · Accepted Answer

これを試して：

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

score 2 · Accepted Answer

jQueryソリューションはありません。

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

ここでこれを見つけました。

score 1 · Accepted Answer

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

これは、href リンクの場合と同様です。onclick ハンドラーがあり、ハンドラーが false を返す場合、リンクはたどられません (ハンドラーの実行後にブラウザーはイベントを停止します)。

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

score 0 · Accepted Answer

選択リストを開くことはできませんが、クリックまたはその他の必要なイベントで選択リストのサイズを変更することで実行できます

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

score 0 · Accepted Answer

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

最初のマウスダウンレイズ -> 幅を「自動」に設定 (ドロップダウンの状態が「閉じる」の場合)
レイズをクリック -> ドロップダウンの状態を var に保存: 'open'
値を選択すると、2 回目のマウスダウンが発生します: 何もしません
レイズをクリック -> ドロップダウンの元の幅を復元し、var の状態を '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>

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

本当に .blur() が .change() イベントと一緒に必要かどうかはわかりません (それを取り出して、問題に対処するかどうかを確認してください... IE で select を頻繁に使用しますが、問題はないようです。

javascript - Javascript/jQuery を使用して Select を開きますか?

13 に答える 13

Related

Reference