webentwicklung-frage-antwort-db.com.de

Open Auswahl mit Javascript/jQuery?

Gibt es eine Möglichkeit, eine Auswahlbox mit Javascript (und jQuery) zu öffnen?

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

Ich muss meine Auswahl öffnen, zB wegen Fehler. Alle Versionen von IE (6,7,8) schränken meine Optionen ein. Soweit ich weiß, gibt es keinen CSS-Bugfix für diesen Befehl.

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

}

Wenn Sie jedoch beim ersten Mal auf meine Auswahl klicken, wird die Breite der Auswahl geändert. Ich muss jedoch erneut klicken, um sie zu öffnen.

26
Newbie

Okay, ich habe einen anderen Weg gefunden, um dieses Problem zu beheben ... Hier ist der Fix:

Bitte geben Sie mir eine Rückmeldung! Ich bin irgendwie stolz auf mich;)

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

Anstatt click zu verwenden, können Sie den mousedown -Handler verwenden, um das mousedown -Ereignis zu erfassen. mousedown wird vor click ausgelöst, sodass Sie stopPropogation aufrufen können, um die Ereigniswarteschlange zu unterbrechen.

6
jake the snake

Ich weiß, das ist ziemlich alt und hat geantwortet, aber das hat für mich in Safari und iOS UIWebView funktioniert - ich habe es ausgeblendet, aber es soll angezeigt und geöffnet werden, wenn ein anderer Button angeklickt wird.

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

Versuche dies: 

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

und dies zu schließen:

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

NEIN jQuery-Lösung.

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

Fand das hier .

1

Ich denke, Sie müssen true von Ihren Event-Handlern zurückgeben (klicken, verwischen usw.). Nach der Ausführung Ihres Handlers setzt der Browser das Ereignis fort und öffnet das select.

Bei href-Links ist es ähnlich. Wenn sie einen Onclick-Handler haben und der Handler false zurückgibt, wird der Link nicht verfolgt (der Browser stoppt das Ereignis, nachdem Ihr Handler ausgeführt wurde).

BEARBEITEN: Aufgrund Ihres Kommentars und Ihrer Antwort scheint Ihr Handler die erste Chance zu haben, erst ausgeführt zu werden, nachdem der Browser die Box geöffnet hat.
Ich schlage vor, dass Sie den focus-Ereignishandler ausprobieren. Möglicherweise wird er früher ausgeführt als der click-Handler und möglicherweise, bevor der Browser die Box tatsächlich öffnet. Es ist auch konsistenter (gilt für Maus- und Tastaturnavigation). 

1
Yoni

Zunächst fühle ich den Schmerz dieser Einschränkung in IE - bleh! Ich dachte nur, ich würde das auch teilen, da es für mich scheinbar funktioniert. Ich habe fast den gleichen Ansatz gewählt, aber auf ein Per-Select-Element. In meinem Fall weiß ich, welche Listen lange Daten haben könnten.

Anstatt die select-Elemente absolut zu machen, habe ich sie inline gehalten und sie in einem DIV mit einem versteckten Überlauf verpackt, da das Erscheinungsbild konsistent sein muss. Außerdem wird dieser "Hack" nur angewendet, wenn es IE und ist Die erweiterte Breite ist größer als die aktuelle Breite.

Um dies für alle Auswahlfelder zu verwenden, können Sie Folgendes verwenden:

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

Oder natürlich auf einem Per-Element von ID . Hier ist das Jquery-Plugin:

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

Hoffe das hilft jemandem

1
Brendan Kowitz

Versuche dies:

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

Dann rufen Sie die Funktion auf:

dropDown('elementId');
1
joseantgv

sie können die Auswahlliste nicht öffnen, aber Sie können dies tun, indem Sie die Größe der Auswahlliste beim Klicken oder eines beliebigen anderen Ereignisses ändern

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

Das Mausedown-Ereignis wird vor dem Klickereignis erhöht:

  1. first mousedown raise -> setze die Breite auf 'auto' (wenn der Dropdown-Status 'close' ist)
  2. klicken Sie auf "Raise" -> "Speichern".
  3. Wir wählen einen Wert aus, der zweite Mauszeiger wird angehoben: nichts zu tun
  4. click raise -> Wir müssen die ursprüngliche Breite der Dropdown-Liste wiederherstellen und den Status der Variable in 'close' ändern.

Das Unschärfe- und Änderungsereignis ist erforderlich, um die Dropdown-Liste zu schließen, wenn der Benutzer außerhalb der Dropdown-Liste geklickt hat.

Hier die Komplettlösung mit Brendans Code:

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

Rufen Sie die Funktion auf:

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

Ich ziehe es vor, mein CSS in einer CSS-Datei zu setzen und dann "addClass", aber trotzdem Ihren Code (Teil)

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

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

scheint ein Duplikat zu sein

Ich würde es schaffen:

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

Nicht sicher, ob Sie wirklich die .blur () hier benötigen, was mit dem .change () -Ereignis (versuchen Sie es herauszunehmen sehen, ob das Ihr Problem anspricht ... Ich verwende select oft auf IE und scheint nicht zu scheinen ein Problem haben.

0