如何从选择下拉列表中创建一个变量，并使用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 
}