Question

完整的代码可用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;

 });

Answer 1

问题2 你想做点什么

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

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

对于问题1，你的ajax成功函数只是调用结果

Answer 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?

无法正确显示和获取数据

2 个答案: