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

【问题标题】：Display Select Option Images On Screen在屏幕上显示选择选项图像
【发布时间】：2015-03-11 12:00:51
【问题描述】：

我想在屏幕上显示所有选择的选项值。我进行头脑风暴的一种方法如下：

<select size="4">
<option></option>
<option></option>
<option></option>
<option></option>
</select>

我遇到的问题是，是的，所有内容都显示出来了，但它们都不是 clicable。我希望当其中一个被点击时，它将用户重定向到另一个 url。我还希望每个选项都成为一面旗帜。

我这样做的原因是因为我已经有 10 个图像，称为 10 个城市，并且我想记录用户的城市选择，以便我能够为他们填充正确的社区。p>

更新：

以下是各自图片的链接：

<a href="createEventRestaurant.html""><img id="selectNeighbourhood1" src="content/San-Francisco/berkeleyCampanile.jpg"></a>


<a href="createEventRestaurant.html" target="_self"><img  id="selectNeighbourhood" src="content/San-Francisco/castro.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img  id="selectNeighbourhood"src="content/San-Francisco/dogpatch-tasting-room.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood"src="content/San-Francisco/FD1.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Fishermans-Wharf.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Golden-Gate-Park.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Hayes-Valley.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Marina.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Mid-market.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Mission-district.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Noe-Valley.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Pacific-heights.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Russian-hill.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Soma.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Stanford-university.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Sunset-district.jpg"></a>

<a href="createEventRestaurant.html" target="_self"><img id="selectNeighbourhood" src="content/San-Francisco/Tenderloin.jpg"></a>

【问题讨论】：

图片在哪里？什么是可点击的？您要将用户重定向到的网址在哪里？您需要显示所有相关的源代码和信息，以便我们为您提供帮助。这里我们只有一个 I want 列表和一个空的 select 元素......
我认为在那种情况下select不是你最好的选择，你为什么不能使用ul li组合来创造你想要的视觉效果
感谢您的回复。为了澄清，我在我的初始帖子下添加了一个更新，显示带有相关链接的图像。我想使用 select 的主要原因是，使用它的 ID 我可以识别哪个项目被点击了
我看到的第一个问题，您对多个元素有相同的id。 id 用于标识特定元素（其中一个）如果您想分配某些东西，请将它们分配到一个组中，请使用 class。将元素更改为类，您可以使用jQuery在一个函数中获取元素
id 必须是唯一的。如果您想在多个事物上使用类似的样式，请使用类，而不是 id

标签： javascript jquery css html

【解决方案1】：

让它成为你的 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;
}

这将允许您在单击选项时获得重定向

【讨论】：

【解决方案2】：

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

jsFiddle Demo

“下拉菜单”由 DIV 创建。有一个外部 DIV，#top，和一些子 div，类 .menuitem。 menuitem div 包含在一个名为 #menu 的包装 div 中，它可以向上/向下滑动，呈现 <select> 控件的外观。

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

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

请注意，jsFiddle 存在一些问题……它不是一个完美的环境。一方面，#head div（“选择一个城市”）是透明的。不应该。此外，城市名称应该居中——但 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>

jQuery:

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

参考（re css 优先级）：

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

【讨论】：