Выпадающий выбор с изображениями

Ответ 1

Проверьте этот пример.. все сделано легко http://jsfiddle.net/GHzfD/

EDIT: Обновлено/работает с 2013 года, 02 июля: jsfiddle.net/GHzfD/357

#webmenu{
    width:340px;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();

Ответ 2

Вам даже не нужен javascript для этого!

Надеюсь, это заставило вас заинтриговать, вот и все. Во-первых, структура html:

<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? Радио-кнопки? Верный. Мы создадим их, чтобы они выглядели как раскрывающийся список с изображениями, потому что это то, что вам нужно! Хитрость заключается в понимании того, что когда метки правильно связаны с входами (для атрибута "для" и идентификатора целевого элемента), вход будет неявно активироваться; щелкните по метке = нажмите на переключатель. Здесь идет немного сокращенно css с комментариями inline:

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

Полный пример здесь: http://jsfiddle.net/NDCSR/1/

NB1: вам, вероятно, понадобится использовать его с позицией: absolute внутри контейнера с позицией: относительный + высокий z-индекс.

NB2: при добавлении большего количества фонов для отдельных стилей линий рассмотрите возможность выбора селекторов на основе атрибута "для" метки:

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

Ответ 3

Кажется, что простое html-меню будет проще. Используйте атрибуты данных html5 для значений или любой другой метод, который вы хотите сохранить, и css для обработки изображений в качестве фона или поместите их в сам html.

Изменить: Если вы вынуждены конвертировать из существующего выбора, от которого вы не можете избавиться, есть и хорошие плагины, чтобы изменить выбор в html. Wijmo и Chosen - это пара, которая приходит на ум

Ответ 4

Если вы думаете об этом, концепция, лежащая в раскрывающемся списке, выбирает ее довольно просто. Для чего вы пытаетесь выполнить, просто <ul> будет делать.

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

Вы создаете его с помощью css, и тогда будет выполняться простой JQuery. Я не пробовал это:

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

Ответ 5

PLAIN JAVASCRIPT:

DEMO: http://codepen.io/tazotodua/pen/orhdp

var shownnn = "yes";
var dropd = document.getElementById("image-dropdown");

function showww() {
  dropd.style.height = "auto";
  dropd.style.overflow = "y-scroll";
}

function hideee() {
    dropd.style.height = "30px";
    dropd.style.overflow = "hidden";
  }
  //dropd.addEventListener('mouseover', showOrHide, false);
  //dropd.addEventListener('click',showOrHide , false);


function myfuunc(imgParent) {
  hideee();
  var mainDIVV = document.getElementById("image-dropdown");
  imgParent.parentNode.removeChild(imgParent);
  mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}

#image-dropdown {
  display: inline-block;
  border: 1px solid;
}
#image-dropdown {
  height: 30px;
  overflow: hidden;
}
/*#image-dropdown:hover {} */

#image-dropdown .img_holder {
  cursor: pointer;
}
#image-dropdown img.flagimgs {
  height: 30px;
}
#image-dropdown span.iTEXT {
  position: relative;
  top: -8px;
}

<!-- not tested in mobiles -->


<div id="image-dropdown" onmouseleave="hideee();">
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/fiabee.png" /> <span class="iTEXT">Second</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
  </div>
</div>

Ответ 6

Используйте combobox и добавьте следующий css .ddTitleText{ display : none; }

Больше текста, просто изображений.

Ответ 7

Я немного опаздываю на это, но вы можете сделать это, используя простой бутстрап, а затем сделайте свой код на выбранном событии изменения на любом языке или в фреймворке. (Это просто очень простое решение для других людей вроде меня, которые только начинают и ищут решение для небольшого простого проекта.)

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

Ответ 8

Я пробовал несколько пользовательских выборок на основе jquery с изображениями, но никто не работал в гибких макетах. Наконец я столкнулся с Bootstrap-Select. После некоторых изменений я смог создать этот код.

ссылка github repo здесь