javascript - JQuery 未传递 SELECT 表单参数

Question

我有一个非常基本的任务，即从 SELECT 表单元素传递选定的值，但它仅传递 select 语句的第一个选项，而不是实际选定的选项。

这是“表单选择”部分:

    <p>Grade Level:
        <select id="gradeLevel">
            <option value="">Please select...</option>
            <option value="primary">Primary</option>
            <option value="levelk">Level K</option>
            <option value="level1">Level 1</option>
            <option value="level2">Level 2</option>
            <option value="level3">Level 3</option>
            <option value="level4">Level 4</option>
            <option value="level5">Level 5</option>
            <option value="level6">Level 6</option>
            <option value="level7">Level 7</option>
            <option value="level8">Level 8</option>
        </select>
    </p>
    <p>Test:
        <select id="dropTest">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </p>

这是在 formData 部分传递值的函数。正如您所看到的，我尝试了两种传递值的变体:

<script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadifive({
            'auto'             : true,
            'checkScript'      : 'check-exists.php',
            'formData'         : {
                                   'timestamp' : '<?php echo $timestamp;?>',
                                   'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                                   'first'     : $("#firstName").val(),
                                   'last'      : $("#lastName").val(),
                                   'level'     : $("#gradeLevel").val(),
                                   'drop'      : $("#dropTest option:selected").val()
                                 },
            'queueID'          : 'queue',
            'uploadScript'     : 'uploadifive.php',
            'onUploadComplete' : function(file, data) { console.log(data) }
        });
    });
</script>

这是我的控制台转储，您可以在其中看到两个 SELECT 值都是第一个选项，而不是选定的:

 /Smith_John/1array(7) {
 ["timestamp"]=>
 string(10) "1418341524"
 ["token"]=>
 string(32) "1d8a1c4e5db6c89dba913c0c620231ce"
 ["first"]=>
 string(4) "John"
 ["last"]=>
 string(5) "Smith"
 ["level"]=>
 string(0) ""
 ["drop"]=>
 string(1) "1"
 ["filename"]=>
 string(9) "tr205.pdf"
 }

现在有趣的部分...如果我在控制台中输入 JQuery 命令 $("#gradeLevel").val() 或 $("#dropTest option:selected").val() ，它就会拉出正确选择的值。

我完全迷失了......不知何故，正确的值被提取，但传递的参数不是？

Answer 1

问题是 $("#gradeLevel").val() 和 $("#dropTest option:selected").val() 的值是在此脚本执行时已解决，因此它们始终设置为第一个(默认)元素。更改其他项目不会影响它们，因为它们已经设置。

根据this doc ，你应该这样做:

$(function() {
    $('#file_upload').uploadifive({
        'auto'             : true,
        'checkScript'      : 'check-exists.php',
        'onUploadStart'    : function(file) {
            // set formData here.
            $('#file_upload').uploadifive('settings', 'formData', {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                'first'     : $("#firstName").val(),
                'last'      : $("#lastName").val(),
                'level'     : $("#gradeLevel").val(),
                'drop'      : $("#dropTest option:selected").val()
            });
        },
        'queueID'          : 'queue',
        'uploadScript'     : 'uploadifive.php',
        'onUploadComplete' : function(file, data) { console.log(data) }
    });
});

相关问题:Uploadify: Dynamic FormData does not change