Question

我正在使用php脚本返回的文件名填充<select>元素。上传文件后，我希望<select>元素自动选择新上传的文件。 <option>元素中<select>元素的值是文件名。我正在使用jQuery的.prop()函数来设置所选属性。该元素似乎已被选中，但会立即取消选择。

这是我的HTML：

<select id="uploadedFilesSelect" name="uploadedFiles" multiple="multiple" onchange="onSelectUploadedFile();"></select>

使用Javascript：

if (result['filename']) {
    $('#uploadedFilesSelect > option:contains(' + result['filename'] + ')').prop('selected', 'selected');
}

在对处理上传的PHP脚本的XMLHttpRequest调用的成功处理程序中调用javascript代码。

观察上传文件时会发生什么，我注意到元素滚动到新文件并简要选择它，但随后取消选择。另外，您会注意到我有另一个事件处理程序onSelectUploadedFile()，绑定到onchange事件。当我手动点击文件而不是“短暂”选择文件时，会触发此事件。

我做错了什么？

编辑：完整成功处理程序

function uploadComplete(evt) {
    // Parse the returned json string
    var result = JSON.parse(evt.target.responseText);

    // Refresh the select box
    populateSelectWithFiles();

    clearFileInput();

    // Select the uploaded file in the select element
    if (result['filename']) {
        $('#uploadedFilesSelect > option:contains(' + result['filename'] + ')').prop('selected', 'selected');
    }
}

函数populateSelectWithFiles()调用php脚本将文件名添加到select元素。

函数clearFileInput()只需通过创建一个新文件并替换页面来清除文件输入元素。

Answer 1

您必须自己触发onchange事件，.prop（）不会触发此事件。您可以使用：

$('#uploadedFilesSelect').trigger('change');

以编程方式在<select>元素中选择<option>，然后立即取消选择</select> </option>

1 个答案: