Drop-down-Auswahl mit Bildern

Sie brauchen noch nicht einmal javascript, um dies zu tun!

Ich hoffe, das habe Sie fasziniert, so hier geht. Zunächst die html-Struktur:

<div id="image-dropdown">
    <input type="radio" id="line1" name="line-style" value="1" checked="checked" />
    <label for="line1"></label>
    <input type="radio" id="line2" name="line-style" value="2" />
    <label for="line2"></label>
    ...
</div>

Whaaat? Radio-buttons? Richtig. Wir werden Stil Sie Aussehen wie eine dropdown-Liste mit Bildern, weil das ist, was Sie nach! Der trick ist, zu wissen, dass, wenn die Etiketten sind ordnungsgemäß verknüpft Eingänge (das Attribut "for" - und Ziel-element-id), die Eingabe wird implizit aktiv; klicken Sie auf eine Beschriftung = klicken Sie auf einen radio-button. Hier kommt kommt etwas abgekürzt css mit inline-Kommentare:

#image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:200px; height:50px; overflow:hidden;
    /*animate the dropdown collapsing*/
    transition: height 0.1s;
}
#image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:200px; overflow-y:scroll;
    /*animate the dropdown expanding*/
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons!*/
    position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
    /*style the labels to look like dropdown options*/
    display:none; margin:2px; height:46px; opacity:0.2; 
    background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
#image-dropdown:hover label{
    /*this is how labels render in the "expanded" state.
     we want to see only the selected radio button in the collapsed menu,
     and all of them when expanded*/
    display:block;
}
#image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button
      (with our markup they are semantically related) should be fully opaque
      and visible even in the collapsed menu*/
    opacity:1 !important; display:block;
}

Vollständiges Beispiel hier: http://jsfiddle.net/NDCSR/1/

NB1: Sie werden wahrscheinlich brauchen, um es mit position:absolute in einem container, der mit position:relative +hohe z-index.

NB2: wenn Sie mehr Hintergründe für einzelne stricharten, sollten Sie die Selektoren auf der Grundlage der "for" - Attribut des label-wie so:

label[for=linestyle2] {background-image:url(...);}

InformationsquelleAutor der Antwort o.v.

Wenn Sie darüber nachdenken, das Konzept hinter einem dropdown auswählen, es ist ziemlich einfach. Für das, was Sie versuchen zu erreichen, eine einfache <ul> tun.

<ul id="menu">
    <li>
        <a href="#"><img src="" alt=""/></a> <!-- Selected -->
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
        </ul>
    </li>
</ul>

Du style es mit css und dann einige einfache jQuery zu tun. Ich habe nicht versucht, diese tho:

$('#menu ul li').click(function(){
    var $a = $(this).find('a');
    $(this).parents('#menu').children('li a').replaceWith($a).
});

InformationsquelleAutor der Antwort elclanrs

Ich bin ein wenig zu spät auf diese, aber Sie können dies tun, indem Sie eine einfache bootstrap-Dropdown-Menü und geben Sie dann Ihr code auf select change-Ereignis, in irgendeiner Sprache oder framework. (Dies ist nur eine sehr einfache Lösung, die für andere Leute wie mich, die gerade erst anfangen und suchen nach einer Lösung für ein kleines einfaches Projekt.)

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select Image
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
        <li role="separator" class="divider"></li>
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
    </ul>
</div>

InformationsquelleAutor der Antwort Devanshi Parikh