如何通过jQuery序列化输入的一个值?

Question

我开始做下拉列表，而不是选择，因为它是不可能的风格化，但我没有想到未来，现在我发现，如果我想从表单保存数据到数据库，我需要通过$_POST而不是名称来获取id。

例如，我有一个产品状态下拉列表:NewOldHandmade

如果我想保存所选产品的选定状态，最好是获得状态选项的ID。因为我的表是这样的:

item_id | option_value
1       | 1

如果我发送name为"old"通过$_POST，我需要在插入它之前从另一个表中获取它的ID。

我创建了如下的下拉列表:

/* SELECT REPLACED BY DIV JS */
var select = $('.add-item__select').hide(); // Hide original select options
// Replace each select by div
select.each(function() {
var selectVal = $(this).find('.add-item__select-main').text(),
name = $(this).attr('name');
newDropdownDiv = $('<input class="add-item__input-select" name="' + name + '" placeholder="' + selectVal + '" readonly required><i class="arrow down"></i></input>')
.insertAfter($(this))
.css({paddingLeft: '0.3em', cursor: 'pointer'});
});

每个SELECT都在其后面添加了INPUT。

如果我想在下拉列表中显示shosen值，我需要这样显示:

$('.add-item__input-select').val("text copied from list");

在此之后，如果我以这种方式添加选项ID输入:

$('.add-item__input-select').attr("value", optionID);

如果我想序列化form和中的所有字段值，这是点，$('.add-item__form').serializeArray()我得到两个结果的状态:name: "status", value: "text copied from list"和name: "status", value: optionID

但是我只需要optionID。

我已经为这个结构优化了一切，所以我想问你是否有一些简单的方法来修复它，或者我需要修改结构。

我正在考虑删除INPUT，只是将SELECT不透明度更改为0而不是显示none，并使用SELECT进行表单数据序列化。但是，我将需要替换一些DIV的所有输入，这将保留所选选项的文本，也改变与之相连的一切。例如，如果用户单击INPUT，则标签显示在其上方。

谢谢你的建议

Answer 1

我找到了一个解决方案，但我有问题，它是工作只是如果用户不会刷新页面。在DOM中刷新后一切都是一样的但是serializeArray()只得到输入文本值而不是value="ID">

我只是从FormData中删除了这些我不想要的值。

// Send formData to upload.php
$('.add-item__form').on('submit', function() {
event.preventDefault();
event.stopPropagation();
if ( checkFieldsIfNotEmpty() == true ) {
var formDataFields = $('.add-item__form').serializeArray(), // Get all data from form except of photos
count = Object.keys(data).length; // count fields of object
// Fill formData object by data from form
$.each(formDataFields, function(index, value) {
if ( value.name === 'category' && !$.isNumeric(value.value) || value.name === 'subcategory' && !$.isNumeric(value.value) ) {
// do nothing
} else if ( (value.name.indexOf('filter') >= 0) && !$.isNumeric(value.value) ) {
// do nothing
}
else {
formData.append(value.name, value.value); // add name and value to POST data
}
});
// foreach - fill formData with photos from form
$.each(data, function(index, value) {
formData.append('files[]', value);
});
uploadData(formData); // send data via ajax to upload.php
}
});

你能告诉我有什么问题吗?