There are two objects on the page. left select, right field in which I would like to see the output of the selected option.

The difficulty is to fill the form on the right without rebooting. Those. the user sits option clicks and on the right in the form these options are immediately displayed.

this form

<form action="admissionUser" method="POST" class="form1"> <select multiple="multiple" id="admissionUser" name="admission[]" id="select1" class="select"> <option disabled>Выберите</option> <option value="Показатель 1">1</option> <option value="Показатель 2">2</option> <option value="Показатель 3">3</option> <option value="Показатель 4">4</option> </select> </form>

    2 answers 2

    Something like this. Prevents page reload from e.preventDefault() . Well, I think the essence is clear.

     $('#form').submit(function(e) { e.preventDefault(); var formData = new FormData($('#form')[0]); $('#form select option').each(function() { formData.append("admission", $(this).val()); }); $.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: formData, contentType: false, processData: false, success: function(result) { //с сервера приходят данные в result и ты их отображаешь на экран // к примеру создаёшь рядом <div id ='result'></div> $("#result").html("<p>" + result + "</p>"); } }); });

      If the tag id to output the result is 'output' , then

       document.getElementById('admissionUser').addEventListener('change', e => document.getElementById('output').innerHTML = e.target.value; )