如何通过管道分隔隐藏字段中的多项选择

Question

我有一个表单，它有 3 个下拉菜单可供选择，第一个下拉菜单允许用户选择特定类型，第二个框，用户必须选择一个日期，然后该日期将向用户显示过滤后的选项在 Jquery 中完成的第三个下拉菜单。我让它在用户只在第三个下拉菜单中选择一个选项的情况下工作。

现在我希望用户选择多个选项。下面的代码是我用来获取单选来更新隐藏字段并通过表单提交传递的。

下面的代码减去“.join('|')”将值输出到隐藏字段，然后通过 POST 传递到数据存储中。

这是我的代码：

$('#TopicID').on('change',function()
        {   TIDval.val( $(this).find(':selected').text().join('|') );
        });

如果我删除“.join('|')”，我尝试了几个版本让它工作，输出给了我所有连接的值。

值 1：树 价值2：船 价值3：汽车

输出如下：treeboatcar

但我需要：树|船|汽车

我已更新我的新代码，以反映在此线程中加载...建议的解决方案到以下内容。

$('#TopicID').change(function(){
               var selectedText = $(this).find(':selected').map(function(){
                   return $(this).text(); //$(this).val()
                     }).get().join('|');

               $("#TopicID_value").text(selectedText);
            });

现在使用管道分隔值正确更新隐藏字段值，但在表单中提交时，该值不再在 POST 调用中传递。

隐藏字段

在萤火虫中，当我选择一个或多个选项时，我看到值正在正确更新，但由于某种原因，该值在提交过程中丢失了。我看不出有什么不同。

Answer 1

使用map()

$('#TopicID').change(function(){
   var selectedText = $(this).find(':selected').map(function(){
       return $(this).text(); //$(this).val()
   }).get().join('|');
   console.log(selectedText);
});

$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
   return $(this).text(); //$(this).val()
}).get().join('|');
console.log(selectedText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="TopicID" multiple="true">
 <option id="1">ABC</option>
 <option id="2">XYZ</option>
 <option id="3">PQR</option>
</select>