更改后如何只提交表单上单个选择框的值？

Question

I am working on a project that loads a list of items and the user needs to be able to change attributes to this list of items.

Basically I have 50 select boxes on a form with pre-loaded selections. I want to submit only the value of the select box that the user chooses to change. I know I know I need to use the on change attribute and have it submitted. However how do I only submit the value of the individual element changed?

Answer 1

One quick'n'dirty approach would be to wrap each individual select box in their own form element with each form having a unique POST action.

A cleaner approach would be to have a hidden form that contains a hidden field for the selectBox the user changed and a hidden field for the value they changed it to. The workflow would be: User changes select box -> Update hidden fields -> Submit hidden form.

Answer 2

OnChange use Ajax to send just the value of the select box to your endpoint using GET.

Assuming Jquery (but any library or native JS will work)

Some dirty code (time constraints) to get you started:

var selVal = $("#myselect").val();   
$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: "url-that-will-handle-the-data",
    data: '{ "param1": selVal }',
    success: function (msg) {
        alert(msg.d);
    }
});