How to send data to server in json format, with linked lists?

Question

PHP

In general, there is such a form. As a result of which it is necessary to send the contents of the selects to the server. That is, not atrr value, but the text itself inside the option.

the meaning is that the first from the second list is interconnected, that is, if one option is selected in the first, then show another in the second list.

And send all these internal data to the server, for sending to the mail .....

Please help me solve this problem, I tried thousands of options and in each of them something did not work. if you leave it as it is, then it stupidly sends 1.2.3.4.5.6 the content of value, And sometimes it sends such things Ва&shcy))

form#msform(method="post" action="")
                .select
                    select#country_id.StyleSelectBox(name="name")
                        option(value='0') vasya
                        option(value='1')petya                       
                        option(value='3') tasha       
                        option(value='4') dasha       
                        option(value='5') sasha       
                        option(value='6') masha       
                        option(value='7') vashsa       
                        option(value='8') anton
                        option(value='9') baton
                .select
                    select#region_id.StyleSelectBox(disabled='disabled' name='data')


<script>

var all_regions = [];

    (function () {
        all_regions[0] = ["19.06.2020 - 23.06.2020"];
        all_regions[1] = ["14.08.2020 - 21.08.2020"];
        all_regions[2] = ["24.08.2020 - 31.08.2020"];
        all_regions[3] = ["21.10.2020 - 04.11.2020"];
        all_regions[4] = ["03.10.2020 - 18.10.2020"];
        all_regions[6] = ["10.11.2020 - 28.11.2020"];
        all_regions[7] = ["01.07.2020 - 05.07.2020"];
        all_regions[8] = ["08.07.2020 - 12.07.2020"];
        all_regions[9] = ["06.07.2020 - 08.07.2020"];


        var country_id = document.getElementById("country_id");

        country_id.onchange = function () {
            region_id.disabled = false;
            region_id.innerHTML = "<option value='0'> Выберите дату </option>";
            var myregion = this.value - 1;

            if (myregion !== -1) {
                for (var i = 0; i < all_regions[myregion].length; i++) {
                    region_id.innerHTML += "<option value=\"" + (i + 1) + "\">" + all_regions[myregion][i] + "</option>";
                }
            } else {
                region_id.disabled = true;
                city_id.disabled = true;
            }
        };
    })();

$("#sendSubmit").click(function (e) {
            e.preventDefault()
            sendForm()
        }
    )

function sendForm() {

    $.ajax({
        url:     'form.php', 
        type:     "POST", 
        dataType: "html", 
        data: $('#msform').serialize(),  
        success: function(response) { 
            result = $.parseJSON(response);
            console.log(result)
            },
        error: function(response) { 
            console.log('oshibki')
        }
    });
}


<script>

Answer 1

Just write your own function for serialization (for collecting data from the form). I don't understand what the problem is.