在屏幕上显示选择选项图像

让这个成为你的html

<select id="select" size="4">
<option value="http://www.google.com">option</option>
<option>option</option>
<option>option</option>
<option>option</option>
</select>

这是你的JavaScript

var select = document.getElementById('select')
select.addEventListener('click', go, false);
function go (e) {
    e.preventDefault();
    var url = e.target.value;
    window.location.href= url;
}

这将允许您在单击该选项时被重定向

我有一些东西可能对你有用。它展示了如何创建自己的"下拉列表"，获取用户单击的内容，并使用适当的图像填充 DIV。我希望这就是你要做的。

jsFiddle 演示

"下拉菜单"由 DIV 创建。有一个外部 DIV，#top 和一些 .menuitem 级的子div。menuitemdiv 包含在一个名为 #menu 的包装器div 中，它可以向上/向下滑动，从而给出<select>控件的外观。

当您单击城市名称时，jQuery 代码会读取单击的选择的 ID，并使用该信息填充picFramediv。如果我要重写这个，我会这样做：

修改后的 jsFiddle - 它不会插入整个 img 标签，而是只更新现有 img 标签的 src= 属性

请注意，jsFiddle 有一些问题...这不是一个完美的环境。首先，#headdiv（"选择一个城市"）是透明的。不应该。此外，城市名称应该居中 - 但jsFiddle不优先考虑ID（在css中，id应该"赢得"类）

无论如何，这是一个开始。希望对您有所帮助。

.HTML：

<div id="top">
    <div id="head" class="clickable">Choose a City</div>
    <div id="menu">
        <div class="menuitem clickable" id="m1">
            <div class="thepic" id="pic1"><img src="http://placekitten.com/300/50" /></div>
            <div class="moveleft">Cupertino</div>
        </div>
        <div class="menuitem clickable" id="m2">
            <div class="thepic" id="pic2"><img src="http://placekitten.com/300/51" /></div>
            <div class="moveleft">San Francisco</div>
        </div>
        <div class="menuitem clickable" id="m3">
            <div class="thepic" id="pic3"><img src="http://placekitten.com/300/49" /></div>
            <div class="moveleft">Silicon Valley</div>
        </div>
    </div>
</div>
<div id="picframe"></div>

j查询：

var themap;
$('#head').click(function(){
    $('#menu').animate({
        top: 0
    },800);
});
$('.menuitem').click(function(){
    var loc = this.id;
    if (loc=='m1'){
        themap = '<img src="http://placekitten.com/g/150/150" />';
    }else if (loc=='m2'){
        themap = '<img src="http://placekitten.com/149/151" />';
    }else{
        themap = '<img src="http://placekitten.com/g/151/149" />';
    }
    $('#menu').animate({
        top: '-300px'
    },1000);
    $('#picframe').html(themap);
});

.CSS：

img{opacity:.3;}
.clickable{cursor:pointer;}
#head{height:35px;width:304px;font-size:2em;text-align:center;z-index:2;background:white;}
#menu{position:relative;top:-300px;}
.menuitem{position:relative;width:304px;height:54px;margin:5px 0;}
.thepic{position:absolute;top:0;left:0;}
.moveleft{position:relative;top:10px;left:0;background:transparent;font-size:2em;color:blue;}
#pic1{width:130px;margin:0 auto;}
#pic2{width:200px;margin:0 auto;}
#pic3{width:230px;margin:0 auto;}
#picframe{height:150px;width:150px;border:1px solid grey;}

参考（重新 css 优先级）：

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/