Javascript 双击列表项打开页面_Javascript_Html

Javascript 双击列表项打开页面

javascript html

Javascript 双击列表项打开页面,javascript,html,Javascript,Html,我有一个简单的选择菜单，其中有一些列表项，在加载页面时动态插入 <select id="viewTasks" name="viewTasks" size=10 style="width: 100%;"> <option>Task 1</option> <option>Task 2</option> <option>Task 3</option> <option>Task

我有一个简单的选择菜单，其中有一些列表项，在加载页面时动态插入

<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
    <option>Task 1</option>
    <option>Task 2</option>
    <option>Task 3</option>
    <option>Task 4</option>
</select>


任务1
任务2
任务3
任务4

每当用户在任何单个列表项上双击时，我希望向其显示一个特定页面。我要显示的页面将根据列表项字符串中的数据显示

我应该怎么做呢？

使用jQuery的事件：

$(document).ready(function()
{
    $("#viewTasks").dblclick(function()
    {
        var index = $(this).find(":selected").index();

        if(index == 0)
        {
            //do task 1
        }
        else if(index == 1)
        {
            // do task 2
        }
    });
});

Fiddle:

使用jQuery的事件：

小提琴：

或生的：

<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
    <option ondblclick="someFunction(1);">Task 1</option>
    <option ondblclick="someFunction(2);">Task 2</option>
    <option ondblclick="someFunction(3);">Task 3</option>
    <option ondblclick="someFunction(4);">Task 4</option>
</select>
<script>
  function someFunction(item) {

     switch(item) {
       case 1: ...
     }
  }
</scritp>


任务1
任务2
任务3
任务4
功能（项）{
开关（项目）{
案例1：。。。
}
}

或生的：

<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
    <option ondblclick="someFunction(1);">Task 1</option>
    <option ondblclick="someFunction(2);">Task 2</option>
    <option ondblclick="someFunction(3);">Task 3</option>
    <option ondblclick="someFunction(4);">Task 4</option>
</select>
<script>
  function someFunction(item) {

     switch(item) {
       case 1: ...
     }
  }
</scritp>


任务1
任务2
任务3
任务4
功能（项）{
开关（项目）{
案例1：。。。
}
}

动态插入选项时，需要使用jQuery的

.on

方法

  $(function() {
    $(document).on("dblclick", "#viewTasks", function(){
       // DO YOUR STUFF HERE
    });  
  });

在动态插入选项时，需要使用jQuery的

.on

方法

  $(function() {
    $(document).on("dblclick", "#viewTasks", function(){
       // DO YOUR STUFF HERE
    });  
  });

在本例中，jQuery仅用于在JSFIDLE中运行初始化事件，您可以将其放入body

onLoad

处理程序中，就像MDN参考页上显示的那样

基本上，您可以获取要为其处理双击事件的元素，并指定一个用户定义的函数，或者在该事件发生时运行一个匿名函数。您不一定需要jQuery来实现这一点，但它是一个完美的例子，说明了jQuery在处理来自DOM对象的事件时如何使事情变得更简单

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
    initElement();
});

function initElement()
 {
 var p = document.getElementById("foo");
 // NOTE: showAlert(); or showAlert(param); will NOT work here.
 // Must be a reference to a function name, not a function call.
 p.ondblclick = showAlert;
 };

function showAlert()
 {
 alert("ondblclick Event detected!")
 }
});//]]>  

</script>


</head>
<body>
  <span id="foo">My Event Element</span>
<p>double-click on the above element.</p>

</body>


</html>


-JSFIDLE演示
//  
我的事件元素
双击上面的元素

在本例中，jQuery仅用于在JSFIDLE中运行初始化事件，您可以将其放入body

onLoad

处理程序中，就像MDN参考页上显示的那样

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
    initElement();
});

function initElement()
 {
 var p = document.getElementById("foo");
 // NOTE: showAlert(); or showAlert(param); will NOT work here.
 // Must be a reference to a function name, not a function call.
 p.ondblclick = showAlert;
 };

function showAlert()
 {
 alert("ondblclick Event detected!")
 }
});//]]>  

</script>


</head>
<body>
  <span id="foo">My Event Element</span>
<p>double-click on the above element.</p>

</body>


</html>


-JSFIDLE演示
//  
我的事件元素
双击上面的元素

这里有一把小提琴，可以做你想要的（纯javascript）：

下面是一个可以实现您想要的功能的提琴（纯javascript）：

@Soundz我想避免它，因为我还不完全熟悉它。不过，我还是希望看到您的解决方案：）@Soundz我希望避免使用它，因为我还不完全熟悉它。不过，我还是想看看你的解决方案：）谢谢，第二个解决方案正是我所需要的。愚蠢的问题，但是我如何从“someFunction”中访问字符串“Task 1”？我添加了一个不需要jquery的答案，并提供选项文本…通过将项参数传递到switch语句中的

someFunction（）

，您可以定义要去哪里，或者更简单地传递要链接的url，然后你只需要做：

谢谢，第二个解决方案正是我所需要的。愚蠢的问题，但是我如何从“someFunction”中访问字符串“Task 1”？我添加了一个不需要jquery的答案，并提供选项文本…通过将项参数传递到switch语句中的

someFunction（）

，您可以定义要去哪里，或者更简单地传递要链接的url，然后你只需要做：

这很好地完成了我需要的一切。非常感谢。这很好用，而且做了我需要的一切。谢谢。