Jquery自动更改选择选项

Question

我想编辑这个代码:https://stackoverflow.com/a/48380888/16910028

我想改变，使它会立即显示，但我有选择选项的问题。当我选择其他选项时，它不会更新。

这是我的代码

$(document).ready(function() {
$("#my_form input,textarea").stop().keyup(function() {
var data = new FormData();
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "test.php",
method: "post",
processData: false,
contentType: false,
data: data,
success: function(data) {
console.log(data);
$('#preview').html(data);
},
error: function(e) {
//error
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg" />
</form>
<div id="preview"></div>

test.php文件

print_r($_POST);
print_r($_FILES);

有什么办法可以让它工作吗?

Answer 1

您仅在响应textarea或input中的keyup事件时执行代码。您需要为<select>的change事件设置一个侦听器。

把所有的代码放在一个命名函数中，这样你就可以从这些事件监听器中调用它。

$("#my_form input, #my_form textarea").keyup(do_ajax_submit);
$("#my_form select").change(do_ajax_submit);
function do_ajax_submit() {
var data = new FormData();
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "test.php",
method: "post",
processData: false,
contentType: false,
data: data,
success: function(data) {
console.log(data);
$('#preview').html(data);
},
error: function(e) {
//error
}
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg" />
</form>
<div id="preview"></div>