JQuery 不传递 SELECT 表单参数

Question

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

这是 FORM 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

Answer 2

您正在收到 $("#gradeLevel").val() 准备好文档..

那一刻，你在两个[select]中都选择了第一个选项，对吧？

您应该在选择正确的选项后获得值..

Answer 3

使用...

$("#dropTest").val()

...或...

$("#dropTest option:selected").text()

这首先会为您提供选定的相关选项值。第二个选项将为您提供选项的文本。

参考：HERE

Answer 4

试试这个：

$("button").on("click", 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) }
        });
    });
});

如果您希望在更改选择选项时发生这种情况，请尝试此操作

$("select").on("change", function()
{
  //Your code here
}

基本上这将允许 javascript 在 DOM 加载后执行。