如何从选定的下拉列表中创建变量并使用javascript返回

Question

I have an HTML page with a dropdown list, which represent specific time as follow:

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

I want to create a function which identify the time and return a value assigned with this time. For instance when user click sec5 the function put in the variable timeOption = 5000; I use javascript and jQuery for that:

$('#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
});

How to add a return statement with specific value ?

Answer 1

You are asking for a return statement, but that is not the right approach, because an event callback isn't called from a context where you can handle the function's return value (the return value ends up in a jQuery function and gets handled there). You want to make your timeOption value visible to some other function, which you can do in various ways. In this case, I would suggest passing the value to a function:

$('#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
}

Answer 2

Change your code little bit. Add data attribute to every anchor tag and then write click handler

 $('#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>