it-swarm.com.de

Wie kann ein HTML SELECT programmgesteuert angewiesen werden, das Dropdown-Menü aufzurufen (z. B. aufgrund von Mouseover)?

Wie können Sie einem HTML select programmgesteuert anweisen, das Dropdown-Menü aufzurufen (z. B. aufgrund von Mouseover)?

93
Corey Trager

Dies ist mit einem HTML-Select-Tag nicht möglich, aber mit JavaScript und HTML. Hierzu gibt es verschiedene Steuerelemente, z. B. die "Vorschlags" -Liste, die an den Eintrag SO "Interessantes/Ignoriertes Tag" angehängt ist, oder die Google Mail-Suche nach E-Mail-Adressen.

Es gibt viele JavaScript + HTML-Steuerelemente, die diese Funktion bereitstellen. Suchen Sie nach Steuerelementen für die automatische Vervollständigung, um Ideen zu erhalten.

Siehe diesen Link für die Autocomplete-Steuerung ... http://ajaxcontroltoolkit.codeplex.com/

16
rp.

Dies ist tatsächlich mit HTML + Javascript möglich, obwohl die Leute sonst überall sagen, dass dies nicht der Fall ist.

Dies funktioniert jedoch nur in Chrome. Lesen Sie mehr, wenn Sie interessiert sind.


Gemäß W3C Working Draft für HTML5, Abschnitt 3.2.5.1.7. Interaktiver Inhalt :

Bestimmte Elemente in HTML weisen ein Aktivierungsverhalten auf, das bedeutet, dass der Benutzer sie aktivieren kann. Dies löst eine Folge von Ereignissen aus, die vom Aktivierungsmechanismus [...] abhängen , beispielsweise über Tastatur- oder Spracheingabe oder per Mausklick .

Wenn der Benutzer ein Element mit einem definierten Aktivierungsverhalten auf eine andere Weise als durch Klicken auslöst, muss die Standardaktion des Interaktionsereignisses darin bestehen, einen synthetischen Klick auszuführen Aktivierungsschritte am Element.

Da <select> Ein interaktiver Inhalt ist, war ich der Meinung, dass es möglich ist, seine <option> Programmgesteuert anzuzeigen. Nach einigen Stunden des Herumspielens entdeckte ich, dass die Verwendung von document.createEvent() und .dispatchEvent() funktioniert.

Das heißt, Demo-Zeit. Hier ist eine funktionierende Geige.


HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

Wenn jemand einen Weg findet, dies auch zu tun, aber nicht in Chrome, Sie können diese Funktion jederzeit ändern . Für den Fall, dass Sie nicht mehr weiterkommen möchten

123
Xavier Ho

In der Antwort von Xavier Ho geht es darum, wie das Problem in den meisten derzeit verfügbaren Browsern behoben werden kann. Aber, es ist eine gute Praxis, Ereignisse nicht mehr per JavaScript zu versenden/zu modifizieren . (Wie mousedown in diesem Fall)

Ab Version 53+ führt Google Chrome keine Standardaktion für nicht vertrauenswürdige Ereignisse aus . Beispielsweise für Ereignisse, die erstellt wurden oder Diese Änderung wurde per Skript geändert oder über die dispatchEvent -Methode versandt. Diese Änderung dient der Ausrichtung auf Firefox und IE, von dem ich denke, dass sie die Aktion bereits nicht ausführt.

Zu Testzwecken wird Fiddle vorausgesetzt, Xaviers Antwort funktioniert nicht in chrome 53+. (Ich teste es nicht mit FF und IE).

Links als Referenz:

https://www.chromestatus.com/features/5718803933560832https://www.chromestatus.com/features/6461137440735232

Und initMouseEvent ist auch veraltet

42
Asim K T

Dies ist die Größe, die ich am ehesten erreichen könnte, ändern Sie die Größe des Elements onmouseover und stellen Sie die Größe onmouseout wieder her:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
26
CMS

ich habe das gleiche Problem und der einfachere Weg, dies zu lösen, war mit HTML und CSS.

select{
  opacity: 0;
  position: absolute;
}
<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>
10
Rafael Umbelino

Ich denke, das ist in Chrome nicht mehr möglich.

Es scheint, dass Version 53 von chrome diese Funktionalität deaktiviert, wie von Asim K T angegeben.

Entsprechend der Spezifikation http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Vertrauenswürdige Ereignisse sollten die Standardaktion nicht auslösen (außer Klickereignis).

Sie haben es jedoch in der Webansicht aktiviert, aber ich habe dies nicht getestet.

Wir haben festgestellt, dass einige Webviews FastClick verwenden. Aufgrund der Bruchgefahr werden wir Mausklicks auf ausgewählte Objekte zulassen, auch wenn diese nicht vertrauenswürdig sind.

Und in diesem Diskussion wird die Idee, Entwickler programmatisch ein Dropdown öffnen zu lassen, aufgegeben.

8
Understatic

Wenn noch jemand danach sucht:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

Javascript:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

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

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

Update:

Eine, bis es keine perfekte Lösung für dieses Problem gibt, aber Sie können versuchen, dieses Szenario zu vermeiden. Warum willst du das tun? Ich habe mich vor einigen Monaten gefragt, ob ich ein ausgewähltes Plugin für mobile Geräte entwickeln soll

https://github.com/HemantNegi/jquery.sumoselect

Schließlich wurde das benutzerdefinierte div (oder ein anderes Element) mit einem transparenten select-Element maskiert, damit es direkt mit dem Benutzer interagieren kann.

7
Hemant_Negi

Hier ist der beste Weg, den ich gefunden habe. HINWEIS Es funktioniert nur mit IE unter Windows und Ihr Web müsste sich wahrscheinlich in einer sicheren Zone befinden, da wir auf die Shell zugreifen. Der Trick ist, dass ALT-Abwärtspfeil eine Tastenkombination zum Öffnen ist ein Auswahlfeld.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>
3
sproketboy

Hör auf zu denken, dass eine Sache unmöglich ist, nichts ist unmöglich zu tun, wenn du willst.

Verwenden Sie diese erweiterte JS-Funktion, die von einem Typen erstellt wurde.

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

Schließen Sie diese JS ein und nennen Sie das Übergeben des Parameters als Ihre Auswahl-ID wie folgt:

ExpandSelect(MySelect)
2

Ich kann mich irren, glaube aber nicht, dass dies mit dem Standardauswahlfeld möglich ist. Sie könnten etwas mit JS & CSS machen, das das gewünschte Ergebnis erzielt, aber (meines Wissens) nicht das Vanilla SELECT.

1
Chuck