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

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

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