无法正确显示和获取数据答案

【问题标题】：Not able to display and fetch data properly无法正确显示和获取数据
【发布时间】：2018-05-21 10:51:20
【问题描述】：

完整代码可在on this link获取

我有一个包含一个下拉菜单和一个输入字段的表单。下拉列表允许用户选择多个值，并且这些选定的值显示在输入字段中。此输入字段不仅显示选定的值，还允许用户键入自己的消息。

现在有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;

 });

【问题讨论】：

你为什么不把你的

标签： javascript jquery ajax input drop-down-menu

【解决方案1】：

对于第 2 期你想做类似的事情

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

注意：文本输入只能存储字符串，浏览器会将你提供的数据转换成字符串

对于问题 1，您的 ajax 成功函数只是控制结果

【讨论】：

【解决方案2】：

当您将选定的值传递给输入时，将其传递给一个新数组，您将拥有选定的值，要将其与用户输入分开，您可以执行以下操作：var textInput= document.getElementById("msg").value; var userInput = textInput.replace(selectedValuesArray,'');
这是第一个问题。对于第二个问题以删除逗号中的重复项，请查看此主题：Remove duplicate commas and extra commas at start/end with RegExp in JavaScript, and remove duplicate numbers?

【讨论】：

@Kai 这里是第二期的主题。