1

ページのロード時に動的に挿入されるいくつかのリスト項目を含む単純な選択メニューがあります。

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

ユーザーが単一のリスト項目をダブルクリックするたびに、特定のページを表示したいと考えています。リスト項目文字列のデータに従って、表示したいページが表示されます。

これを行うにはどうすればよいですか？

4

6 に答える 6

2 
$(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
        }
    });
});
于 2013-07-22T13:14:35.440 に答える
2 
$('#viewTasks option').dblclick(function() {
 //do something
});

または生：

<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>
于 2013-07-22T13:15:35.160 に答える
1

ここにあなたが望むことをするフィドルがあります（純粋なjavascript）：http://jsfiddle.net/S3KN4/3/

var initializeListeners = function() {

    console.log('initializeListeners');

    var viewTasksElement = document.getElementById('viewTasks');

    viewTasksElement.addEventListener('dblclick', showPage, false);

}

var showPage = function() {

    console.log('showPage');

    var viewTasksElement = document.getElementById('viewTasks');

    var taskText = getSelectedTaskText(viewTasksElement);

    if (taskText) {

        // do something
        console.log('selected task: ' + taskText);

    }

};

var getSelectedTaskText = function (selectElement) {

    console.log('getSelectedTaskText');

    if (selectElement.selectedIndex == -1) {

        return null;

    } else {

        return selectElement.options[selectElement.selectedIndex].text;

    }

}

initializeListeners();
于 2013-07-22T13:37:11.837 に答える
0

.onオプションは動的に挿入されるため、jQuery のメソッドを使用する必要があります。

  $(function() {
    $(document).on("dblclick", "#viewTasks", function(){
       // DO YOUR STUFF HERE
    });  
  });
于 2013-07-22T13:26:39.053 に答える
0

ここで DOM イベントの MDN 定義を確認してくださいondblclick。

これは、その定義を参照する jsFiddle の実例です。

この例では、jQuery は jsFiddle で初期化イベントを実行するためにのみ使用されました。MDNonLoadリファレンス ページに示されているように、ボディ ハンドラーに配置できます。

基本的に、ダブルクリック イベントを処理する要素を取得し、そのイベントが発生したときに実行するユーザー定義関数または匿名関数を割り当てます。これには jQuery が絶対に必要というわけではありませんが、DOM オブジェクトからのイベントの処理に関して jQuery がどのように簡単になるかを示す完璧な例です。

<!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>
于 2013-07-22T13:31:09.293 に答える
0

jQuery の.dblclick()イベントを使用します。

$('#viewTasks').dblclick(function() {
  alert('The item was double-clicked!');
});

フィドル: http://jsfiddle.net/2cDv7/

于 2013-07-22T13:14:40.770 に答える