Question

发生了一些奇怪的事情。使用jquery的html生成时间选择器。如果我submit默认值为actiont.php，则脚本会打印一个空白字符串。

为什么？ （以下是jsfiddle，输出为jquery和html）

HTML：

<html>
<head> 

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery.timepicker.js" type="text/javascript"></script>
    <title> </title>    

</head>
<body>
    <form action="actiont.php" method="post">
        <input type="text" class="timepicker" name="timepicker" id="timepicker" /> <br />
        <input type="submit" />
    </form>
</body>

JQuery的：

    /* jQuery timepicker
 * replaces a single text input with a set of pulldowns to select hour, minute, and am/pm
 *
 * Copyright (c) 2007 Jason Huck/Core Five Creative (http://www.corefive.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version 1.0
 */

(function($){
    jQuery.fn.timepicker = function(){
        this.each(function(){
            // get the ID and value of the current element
            var i = this.id;
            var v = $(this).val();

            // the options we need to generate
            var hrs = new Array('01','02','03','04','05','06','07','08','09','10','11','12');
            var mins = new Array('00','15','30','45');
            var ap = new Array('am','pm');

            // default to the current time
            var d = new Date;
            var h = d.getHours();
            var m = d.getMinutes();
            var p = (h >= 12 ? 'pm' : 'am');

            // adjust hour to 12-hour format
            if(h > 12) h = h - 12;

            // round minutes to nearest quarter hour
            for(mn in mins){
                if(m <= parseInt(mins[mn])){
                    m = parseInt(mins[mn]);
                    break;
                }
            }

            // increment hour if we push minutes to next 00
            if(m > 45){
                m = 0;

                switch(h){
                    case(11):
                        h += 1;
                        p = (p == 'am' ? 'pm' : 'am');
                        break;

                    case(12):
                        h = 1;
                        break;

                    default:
                        h += 1;
                        break;
                }
            }

            // override with current values if applicable
            if(v.length == 7){
                h = parseInt(v.substr(0,2));
                m = parseInt(v.substr(3,2));
                p = v.substr(5);
            }

            // build the new DOM objects
            var output = '';

            output += '<select id="h_' + i + '" class="h timepicker">';             
            for(hr in hrs){
                output += '<option value="' + hrs[hr] + '"';
                if(parseInt(hrs[hr]) == h) output += ' selected';
                output += '>' + hrs[hr] + '</option>';
            }
            output += '</select>';

            output += '<select id="m_' + i + '" class="m timepicker">';             
            for(mn in mins){
                output += '<option value="' + mins[mn] + '"';
                if(parseInt(mins[mn]) == m) output += ' selected';
                output += '>' + mins[mn] + '</option>';
            }
            output += '</select>';              

            output += '<select id="p_' + i + '" class="p timepicker">';             
            for(pp in ap){
                output += '<option value="' + ap[pp] + '"';
                if(ap[pp] == p) output += ' selected';
                output += '>' + ap[pp] + '</option>';
            }
            output += '</select>';              

            // hide original input and append new replacement inputs
            $(this).attr('type','hidden').after(output);
        });

        $('select.timepicker').change(function(){
            var i = this.id.substr(2);
            var h = $('#h_' + i).val();
            var m = $('#m_' + i).val();
            var p = $('#p_' + i).val();
            var v = h + ':' + m + p;
            $('#' + i).val(v);
        });

        return this;
    };
})(jQuery);

$(document).ready(function() {
   $('.timepicker').timepicker();
});


/* SVN: $Id: jquery.timepicker.js 456 2007-07-16 19:09:57Z Jason Huck $ */

actiont.php

<?php
  echo $_POST["timepicker"];
?>

Answer 1

最简单的解决方案是在初始化插件后触发更改事件：

$(document).ready(function() {
    $('.timepicker').timepicker();
    $('select.timepicker').change();
});

为什么在使用默认值打印字段时会打印空字符串？

1 个答案: