使用JQuery onSelect

时间:2017-01-05 08:57:19

标签: javascript jquery jquery-ui-datepicker

我尝试使用datepicker和下拉菜单来更新全局变量的值。我对如何让它发挥作用有点无能为力。

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

3 个答案:

答案 0 :(得分:1)

您可以使用窗口对象访问所有全局变量。

window.variable

我必须补充一点,你应该尝试尽可能多地使用局部变量,并且如果你真的没有其他选项就使用全局变量,因为全局变量对于页面上的所有javascript代码都是可见的,而其他脚本可能会假设不同的值为了同样的事情。

当你在函数之外使用var创建变量时,它将是全局变量。

您还可以访问函数内部范围的变量。因此,您可以在内部函数中使用它们,而在上限范围内定义它。

答案 1 :(得分:1)

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? { // Don't want to show a custom image if the annotation is the user's location. guard !annotation.isKindOfClass(MKUserLocation) else { return nil } let annotationIdentifier = "AnnotationIdentifier" var annotationView: MKAnnotationView? if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationViewWithIdentifier(annotationIdentifier) { annotationView = dequeuedAnnotationView annotationView?.annotation = annotation } else { let av = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier) av.rightCalloutAccessoryView = UIButton(type: .DetailDisclosure) annotationView = av } if let annotationView = annotationView { // Configure your annotation view here annotationView.canShowCallout = true annotationView.image = UIImage(named: "yourImage") } return annotationView }

您遗失$

https://jsfiddle.net/skrpv105/3/是更新的代码。

答案 2 :(得分: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/