Question

我想在屏幕上显示所有选择选项值。我头脑风暴的一种方式是：

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

我遇到的问题是显示所有内容，但没有一个是可引用的。我希望当单击其中一个时，它会将用户重定向到另一个URL。我也希望每个选项都成为一个横幅。

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

更新

以下是各自图片的链接：

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

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

这将允许您在单击选项

时重定向

Answer 2

我有一些可能对你有用的东西。 它显示了如何创建自己的＆＃34;下拉＆＃34;，获取用户点击的内容，并使用适当的图像填充DIV。我希望你的＆＃39;是什么？＃39;重新尝试。

jsFiddle Demo

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

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

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

请注意，jsFiddle有一些问题......它不是一个完美的环境。首先，＃head div（＆＃34;选择一个城市＆＃34;）是透明的。它不应该。此外，城市名称应该居中 - 但是jsFiddle不会优先考虑ID（在css中，id应该是＆＃34; win＆＃34;在课堂上）

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

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 precedence）：

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

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

2 个答案: