javascript - 使用 JQuery onSelect 更新全局变量

Question

我正在尝试使用日期选择器和下拉菜单来更新全局变量的值。我对如何让它发挥作用有点一无所知。

var startValue, endValue, intervalValue, startDate, endDate, offset; 
$(document).ready(function() {
    startDate = $("#from").datepicker({
        onSelect: function() {
            startValue = $(this).datepicker('getDate');
        }
    });

    endDate = ("#to").datepicker({
        onSelect: function() {
            endValue = $(this).datepicker('getDate');
        }
    });

    intervalValue = $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");

    $("#btnSubmit").click(function(){});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Start Date: <input type="text" id="from"></p>
<p>End Date: <input type="text" id="to"></p>

<label for="number">Select a number</label>
<select name="number" id="number">
    <option selected="selected">15</option>
    <option>30</option>
    <option>60</option>
</select>

<input id="btnSubmit" type="submit" value="Get Data">

下拉菜单中的值被分配给intervalValue以进行一些计算。

Here's my Fiddle link

Answer 1

更改为

$("#from").datepicker({
    onSelect: function() {
        startValue = $(this).datepicker('getDate');
    }
});

$("#to").datepicker({
    onSelect: function() {
        endValue = $(this).datepicker('getDate');
    }
});

您使用onSelect，因此您不需要将datepicker()函数的结果分配给该值，触发onSelect时该值将被更新。

正如 Martin E 提到的，要使值在更改时保持更新，请在 document.ready 上对其进行初始化:

intervalValue = $('#number option:selected').val();

然后在每次更改时更新它

$('#number').change(function(){ intervalValue = this.value; });

然后使用提交事件进行最终计算以及提交后所需的任何其他操作(请注意，您应该使用表单提交而不是按钮单击，因为它在语义上更好，尽管单击也可以工作)

$('#yourFormId').on('submit', function(event) {
  event.preventDefault();
  intervalValue = intervalValue * (1000*60);
  // ...

结果:https://jsfiddle.net/jw1w4k5o/