如何从选择下拉列表中创建一个变量,并使用JavaScript
我有一个下拉列表中的HTML页面,代表具体时间如下归还:如何从选择下拉列表中创建一个变量,并使用JavaScript
<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语句与特定的价值?
稍微更改一下代码。数据属性添加到每个锚标记,然后写单击处理程序
$('#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>
您正在询问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
}
谢谢,但在我的代码的情况下,我有4个选项,我希望在每次点击相应的选项处理好 –
这是一个例子 - 你可以添加相同的调用所有四个功能。 – AmericanUmlaut
@ HaKiM的只是澄清,因为你不清楚,我已经用同样的电话添加了其他三个功能。为了清楚起见,我有意将它写成尽可能接近您的原始代码 - Pankaj的解决方案是更好的代码,您应该尝试学习编写这样的处理程序。 – AmericanUmlaut
我不明白你的问题都:C –
请更明确指定。 –
@Kinduser当用户点击“5秒”或“10秒”时,我想要实现一个全局可变的值,并且返回它的值 –