Невозможно правильно отобразить и получить данные

Question

Полный код доступен по этой ссылке

У меня есть форма с одним выпадающим списком и полем ввода.Раскрывающийся список позволяет пользователю выбрать несколько значений, и эти выбранные значения отображаются в поле ввода.Это поле ввода не только отображает выбранные значения, но также позволяет пользователю вводить собственное сообщение.

Теперь есть 2 вопроса

Во-первых, когда я выбираю значение вбэкэнд, я не могу различить выбранное значение, которое отображается внутри поля ввода, и сообщение, набранное пользователем в том же поле ввода.

Вторая проблема - если я выбираю случайные значения из выпадающего списка, товнутри поля ввода, в котором отображаются эти значения, есть несколько запятых между 2 значениями

Представление выглядит примерно так

Код HTML

<form  id="send_parent">
  <select id='rec' name="rec " class="selectpicker" multiple >
    <option value="1" >A</option>
    <option value="2" >B</option>
    <option value="3" >C</option>
    <option value="4" >D</option>
    <option value="5" >E</option>
    <option value="6" >F</option>
  </select>

   <input type="text" name="msg" id="msg">

   <button type="submit" id="save">SAVE</button>
</form>

Код сценария

$("#rec").on("change",function(){
    update();
});

function update() {
    var selected=[];
    $('#rec option:selected').each(function()
    {
        selected[$(this).val()]="@"+$.trim($(this).text());
    });
 $("#msg").val(selected);
}



 $("#send_parent").submit(function() 
   {
     var formData = new FormData();
     formData.append('rec', rec.value);
     formData.append('msg', msg.value);
     jQuery.ajax(
      {
        type: "POST",
        url: "<?php echo base_url(); ?>" + "value/send_value",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) 
          {
              console.log(res);
          },
        error: function(errResponse) 
          {
           console.log(errResponse);
          }
     });
     return false;

 });       

Answer 1

Когда вы передадите выбранные значения на вход, передайте его в новый массив, и у вас будут выбранные значения, чтобы отделить его от ввода пользователя, вы можете сделать следующее: var textInput= document.getElementById("msg").value; var userInput = textInput.replace(selectedValuesArray,'');
Это для первой проблемы.И для второго вопроса, чтобы удалить дубликаты в запятых, пожалуйста, проверьте эту тему: Удалите дубликаты запятых и лишние запятые в начале / конце с RegExp в JavaScript, и удалите дубликаты чисел?

Answer 2

Для выпуска 2 вы хотите сделать что-то вроде

$("#msg").val(selected.join(','));

Примечание: ввод текста может хранить только строки, браузер преобразует данные, которые вы предоставляете в строку

Для вопроса 1Ваша функция успеха ajax просто утешает результат