Question

我想创建一个下拉选择，其中包含图像而不是文本作为选项。我已经完成了一些谷歌搜索并在Stack Overflow上搜索，通常给出的答案是使用jQuery combobox。

在我看来，这个解决方案的问题在于你必须提供文本。看起来图像只是左侧文本旁边的图标。如果我错了，请纠正我，但这个解决方案不会涵盖我正在尝试做的事情 - 这完全取代了带有图像的文本。

我正在尝试做的一些背景 - 我正在尝试为用户创建一个下拉列表，以便在在线绘画/涂鸦应用上选择线条粗细。图像是不同厚度的线条，有点像mspaint。

Answer 1

您甚至不需要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？ 单选按钮？正确。我们将它们设计为带有图像的下拉列表，因为这就是您所追求的！诀窍是知道当标签正确链接到输入（“for”属性和目标元素id）时，输入将隐式变为活动状态;单击标签=单击单选按钮。这里有一个略有缩写的css，内联注释：

#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：你可能需要在位置为：relative + high z-index的容器中使用 position：absolute 。

NB2：为单个线条样式添加更多背景时，请考虑使用基于标签的“for”属性的选择器，如下所示：

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

Answer 2

检查此示例..一切都很容易完成http://jsfiddle.net/GHzfD/

编辑：自2013年7月2日起更新/工作：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();

Answer 3

看起来像一个简单的HTML菜单会更简单。将html5数据属性用于值或您想要存储它们的任何方法，并使用css将图像作为背景处理或将它们放在html本身中。

编辑：如果你被迫从一个你无法摆脱的现有选择转换，有一些很好的插件也可以修改选择到HTML。 Wijmo和Chosen是一对想到的人

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

Answer 5

PLAIN JAVASCRIPT：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

使用组合框并添加以下css .ddTitleText{ display : none; }

不再是文字，只是图片。

Answer 7

我对此有点迟到，但你可以使用简单的bootstrap下拉，然后在任何语言或框架中的select change事件上执行代码。（对于像我这样刚刚开始寻找小型简单项目解决方案的其他人来说，这只是一个非常基本的解决方案。）

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

Answer 8

这正在使用ms-Dropdown：https://github.com/marghoobsuleman/ms-Dropdown

但是数据资源是json。

示例：http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

脚本

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>

Answer 9

多年过去了，可以使用纯 javascript 和 css 而无需 jquery 来创建这样的东西，这是一个示例：Selectron23

示例：

let data1 = {
    options: [
        {
            value: 'usd',
            title: 'USD',
            text: 'United States Dollar',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/united_states_of_america.gif'
        },
        {
            value: 'eur',
            title: 'EUR',
            text: 'European Euro',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/european_union.gif'
        },
        {
            value: 'uah',
            title: 'UAH',
            text: 'Украинская гривна',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/ukraine.gif'
        },
        {
            value: 'gbp',
            title: 'GBP',
            text: 'Great Britain pound',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/united_kingdom.gif'
        }
    ],
    label: 'Select currency',
    selected: 'uah',
    width: '100%',
    imgpos: 'right',
    //name: 'my_value', //hidden input name
    fusion: false, //use if wrap  to fuse titles by keys with options description here
    max_open_height: 200, //max height (px) of opened drop-down when vertical scroll appears
};

var selector1 = new Selectron23(document.querySelector('#block-example'), data1);

结果：

Answer 10

我尝试了几个基于jquery的自定义选择图像，但没有一个在响应式布局中工作。最后我遇到了Bootstrap-Select。经过一些修改后，我能够生成这段代码。

github repo link here

下拉选择图像

10 个答案:

您甚至不需要javascript来执行此操作！