Wie automatisch zu erweitern html-select-Elements in javascript

Habe ich eine (versteckte) html-Objekt auswählen in mein Menü angebracht, um eine Menü-Taste link, so dass ein Klick auf den link zeigt die Liste, so dass Sie auswählen können.

Wenn Sie auf die Schaltfläche klicken, ruft es einige javascript zum anzeigen der <select>. Einen Klick entfernt von der <select> blendet die Liste. Was will ich wirklich machen-das ist die <select> erscheinen vollständig erweitert, als hätten Sie klickte auf die "down" - Pfeil, aber ich kann nicht damit es funktioniert. Ich habe versucht viele verschiedene Ansätze, kann aber nicht voran. Was mache ich derzeit:

<li>
    <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
    <select id="list" style="display:none; onblur="javascript:cancellist()">
    </select>
</li>

//in code
function showlist() {
    //using prototype not jQuery
    $('list').show();  //shows the select list
    $('list').focus(); //sets focus so that when you click away it calles onblur()
}
  • Ich habe versucht, Sie anzurufen $('list').click().
  • Ich habe versucht Einstellung onfocus="this.click()"
    Aber in beiden Fällen bin ich immer

Uncaught TypeError: Object # hat keine Methode 'click'

ist als eigentümliche link-text sagt, dass es unterstützt die standard-Funktionen.

Ich habe versucht Einstellung der .size = .length die funktioniert, aber nicht das gleiche Aussehen (als wenn Sie klicken, um öffnen Sie das element, Sie schwebt über den rest der Seite.)

Hat jemand irgendwelche Vorschläge?

mögliche Duplikate von Öffnen Wählen Sie mit Javascript/jQuery?
möglich, Duplikat der Wie können Sie programmgesteuert sagen, dass ein HTML-SELECT-drop-down (z.B. durch mouseover)
Ähnliche Probleme - danke für den Hinweis, Sie aus - Sie scheinen mehr zu werden auf der Suche nach Möglichkeiten, um die Größe des Steuerelements (Breite und Höhe), in der Erwägung, dass alle, die ich tun möchte, ist, es zu haben scheinen "geöffnet".
die doppelte hingewiesen CMS genau Antworten: Sie können nicht. Sie müssen benutzerdefinierte HTML/JS.

InformationsquelleAutor xan | 2010-05-27

  1. 2

    Habe ich über das gleiche problem, wollte zu implementieren, der die navigation mit der Tastatur in meiner app, aber wählen Sie die Elemente wurden nicht erweitert, so dass die Leute mit der Tastatur, dabei waren zu verlieren Funktionalität. Ich habe ExpandSelect () - Funktion emuliert Maus-Klicks auf Elemente auswählen, es tut dies durch die Schaffung einer anderen <select> mit mehreren Optionen auf einmal sichtbar durch die Einstellung der size Attribut, das code ist gehostet auf Google Code-website ExpandSelect.js ist nur 4 KB, siehe screenshots und downloaden Sie hier:

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

    Screenshots

    Gibt es einen kleinen Unterschied in der GUI, wenn die Emulation auf, aber es ist nicht wirklich wichtig, sehen Sie es selbst:

    Wenn mit der Maus klicken:

    MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

    , Wenn die Emulation klicken Sie auf:

    EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

    Mehr screenshots auf der Projekt-website, link oben.

    InformationsquelleAutor Czarek Tomczak

  2. 0

    Hier eine einfache Lösung, AUTO-ERWEITERT-Menü auswählen (alle Optionen sichtbar)

    <select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
  <option selected="selected" value="0">defaulttt</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>
<script type="text/javascript">
 var slctt=document.getElementById("ddlTestSelect");
 slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px';
</script>

    InformationsquelleAutor T.Todua

  3. -1

    Haben Sie einen syntax-Fehler. Es sollte sein:

    $('#list').click();

    Du hast vergessen die #

    Stimmt, aber click wird nicht erweitert, der select element.
    Nicht im Prototypen-glaube ich...

    InformationsquelleAutor Anthony

  4. -1

    Bitte versuchen Sie dies:

    function showlist() {
    //using prototype not jQuery
    $('#list').show();  //shows the select list
    $('#list').focus(); //sets focus so that when you click away it calles onblur()
}
    Ich klebte Ihren code in einem JSFiddle und es funktioniert nicht. Der select-box den Fokus erhält, aber es nicht zu erweitern. (Chrome auf Win7.)
    gerade sah ich dein JSFiddle. bitte bewerben Sie select-box display:none; css-Eigenschaft. und im Skript verwenden $('#Liste') statt $('Liste') und in JSFiddle linken Seite wählen Sie jquery 1.8.2
    Den code in deine Antwort sagt "mit prototype-jQuery nicht." Auch es funktioniert immer noch nicht. Aktualisiert fiddle. Während Sie zeigen, nicht die wählen, es nicht zu erweitern. (Chrome, Win7.)

    InformationsquelleAutor suresh.g

  5. -2

    Der einfachste Weg ist das "multiple" - Attribut in HTML

    <select multiple></select>

    und Sie könnten auch ein style-Attribut, um die Größe der Liste

    <select multiple style="height:150px;"></select>

    InformationsquelleAutor Thomas Fonseca

Schreibe einen Kommentar