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

How do I make items in scroll-list clickable?

本文关键字：项目 单击 列表 何使 滚动      更新时间：2023-09-26

如何使列表项(香蕉、橙子等)可点击?

我想点击kiwi然后进入kiwi。html页面或者

http://jsfiddle.net/pr6tvsxm/

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

试试这样

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

updated jsfiddle http://jsfiddle.net/pr6tvsxm/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>

选项标签中不能使用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;
}

如果你想让它们转到另一个页面，为什么不使用链接列表呢?

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

尝试使用change事件

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

jQuery示例:

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

为每个选项添加属性link 

<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存储链接

相关文章：