Question

如何使列表项（香蕉，橙子等）可点击？

所以我想点击kiwi并转到页面kiwi.html左右

<select name="fruit" size="4" multiple>
    <option selected> Apples</option>
    <option> Bananas</option>
    <option> Oranges</option>
    <option> Watermelon</option>
    <option> Kiwi</option>
</select>

Answer 1

尝试这样的事情

<SELECT id="sel" NAME="fruit" SIZE="4" MULTIPLE >
<OPTION SELECTED> Apples
<OPTION value="Bananas.html"> Bananas                                                                         
<OPTION value="Oranges.html"> Oranges
<OPTION value="Watermelon.html"> Watermelon
<OPTION value="Kiwi.html"> Kiwi
</SELECT>

和你的javascript

document.getElementById("sel").onclick = function(d){
  window.location = this.value;
};

更新了jsfiddle http://jsfiddle.net/pr6tvsxm/2/

Answer 2

试试这个：

<SELECT NAME="fruit" SIZE="4" MULTIPLE onchange="goToPage(this)">
<OPTION SELECTED> Apples
<OPTION> Bananas 
<OPTION> Oranges
<OPTION> Watermelon
<OPTION> Kiwi
</SELECT>

<script>
function goToPage(select) {
    var value = select.options[select.selectedIndex].text;
    window.location.href = value + ".html";
}
</script>

Answer 3

您可以在选项标签内使用href。尝试使用onchange属性来运行一些javascript

<select MULTIPLE  onchange="goToPage(this)">
<option value="test.html">Banana</option>
<option value="test2.html">Kiwi</option>
</select>

然后

function goToPage(element)
{
window.location = element.value;
}

Answer 4

如果您希望他们转到另一个页面，为什么不使用链接列表？

<ul>
    <li><a href="somewhere.com">Apples</a></li>
    <li><a href="somewhere.com">Bananas</a></li>
    <li><a href="somewhere.com">Oranges</a></li>
    <li><a href="somewhere.com">Watermelon</a></li>
    <li><a href="somewhere.com">Kiwi</a></li>
</ul>

Answer 5

尝试使用change事件。

<select id="myselect"> 
   <option data-url="orange.html">Orange</option>
   //etc...
</select>

jQuery中的示例：

$('#myselect').on('change', function() {
  location.href=$(this).data('url');
});

Answer 6

为每个选项添加属性链接

<SELECT NAME="fruit" id="fruit" onchange="change();" SIZE="4" MULTIPLE >
    <option SELECTED link="#"> Apples</option>
    <option link="#"> Bananas</option>                                                                        
    <option link="#"> Oranges</option>
    <option link="#"> Watermelon</option>
    <option link="#"> Kiwi</option>
</SELECT>

并在javascript中

function change(){
    fruit = document.getElementById('fruit');
    link = fruit.options[fruit.selectedIndex].getAttribute('link');
}

现在在link中存储了链接

如何使滚动列表中的项目可单击？

6 个答案: