如何從選擇下拉列表中創建一個變量，並使用JavaScript

Question

我有一個下拉列表中的HTML頁面，代表具體時間如下歸還：

<div class="dropdown form-group col-xs-5" style="padding-right: 20px;"> 
     <label for="time">Temps</label> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    5 sec<span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="timeChoice"> 
      <li><a href="#" id="act1">5 sec</a></li> 
      <li><a href="#" id="act2">10 sec</a></li> 
      <li><a href="#" id="act3"> 15 sec</a></li> 
      <li><a href="#" id="act4">30 sec</a></li> 
     </ul> 
</div> 

我想創造出識別功能時間並返回此時分配的值。例如，當用戶點擊sec5功能放在變量timeOption = 5000; 我使用JavaScript和jQuery爲：

$('#act1').click(function(e) { 
    var timeOption = 5000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 
}); 
$('#act2').click(function(e) { 
    var timeOption = 10000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 
}); 
$('#act3').click(function(e) { 
    var timeOption = 15000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 
}); 
$('#act4').click(function(e) { 
    var timeOption = 30000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 
}); 

如何添加一個return語句與特定的價值？

Answer 1

稍微更改一下代碼。數據屬性添加到每個錨標記，然後寫單擊處理程序

$('#timeChoice').on("click", "a", function(e) { 
 
    var timeOption = e.target.getAttribute('data-time')*1000; 
 
    alert(timeOption); 
 
    e.preventDefault();// prevent the default anchor functionality 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown form-group col-xs-5" style="padding-right: 20px;"> 
 
     <label for="time">Temps</label> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    5 sec<span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="timeChoice"> 
 
      <li><a href="#" id="act1" data-time="5">5 sec</a></li> 
 
      <li><a href="#" id="act2" data-time="10">10 sec</a></li> 
 
      <li><a href="#" id="act3" data-time="15"> 15 sec</a></li> 
 
      <li><a href="#" id="act4" data-time="30">30 sec</a></li> 
 
     </ul> 
 
</div>

Answer 2

您正在詢問return語句，但這不是正確的方法，因爲事件回調不是從可以處理函數返回值的上下文中調用的（返回值以jQuery函數結束，並且在那裏處理）。你想讓你的timeOption值對其他函數可見，你可以通過不同的方式進行操作。在這種情況下，我建議將該值傳遞給函數：

$('#act1').click(function(e) { 
    var timeOption = 5000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 

    handleTimeOption(timeOption); 
}); 

$('#act2').click(function(e) { 
    var timeOption = 10000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 

    handleTimeOption(timeOption); 
});  
$('#act3').click(function(e) { 
    var timeOption = 15000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 

    handleTimeOption(timeOption); 
}); 
$('#act4').click(function(e) { 
    var timeOption = 30000; 
    alert(timeOption); 
    e.preventDefault();// prevent the default anchor functionality 

    handleTimeOption(timeOption); 
}); 

function handleTimeOption(timeOption) { 
    // Here goes whatever code you want to run when a time option has been selectedl 
}