下拉选择图像 [英] Dropdown select with images

问题描述

我想创建一个下拉选择，其中包含图像而不是文本作为选项。我在Stack Overflow上做了一些Google搜索和搜索，通常给出的答案是使用 jQuery组合框 。

I wanted to create a dropdown select which has images instead of text as the options. I've done some Googling and searching here on Stack Overflow, and the answer generally given is to use the jQuery combobox.

这个解决方案的问题，在我看来，是你必须提供文本。它看起来像图像只是伴随文本在左边的图标。如果我错了，请纠正我，但这个解决方案不会覆盖我想要做的 - 这是完全用图像替换文本。

The problem with this solution, it seems to me, is that you have to provide text. It looks like the images are just icons that accompany that text on the left. Correct me if I'm wrong, but this solution wouldn't cover what I'm trying to do-- which is completely replace the text with images.

一些背景我试图做什么 - 我试图创建一个下拉菜单，用户在在线绘画/涂鸦应用程序中选择线条粗细。

Some background on what I'm trying to do-- I'm trying to create a dropdown for users to select line thickness on an online painting/doodling app. The images would be lines of different thickness, kind of like mspaint.

推荐答案

检查这个例子..一切都做得很容易< a href =http://jsfiddle.net/GHzfD/> http://jsfiddle.net/GHzfD/

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/

EDIT ：截至2013年7月02日更新/正在运行： jsfiddle.net/GHzfD/357

EDIT: Updated/working as of 2013, July 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();

这篇关于下拉选择图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！