Javascript 如何在隐藏字段中按管道进行多个选择

我有一个表单，它有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调用中传递

隐藏的领域

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

map（）

$（'#TopicID'）。更改（函数（）{
var selectedText=$（this）.find（':selected'）.map（函数（）{
返回$（this.text（）；//$（this.val（））
}).get（）.join（“|”）；
console.log（selectedText）；
});

基础知识
XYZ
PQR
我意识到我实际上有你的版本，但我使用了.val（），它返回了我需要的文本值。所以我认为我做错了。该解决方案输出正确的值，并根据需要，但它不再发回。当他们提交表单时，虽然我可以看到隐藏字段中的值正在更新，但结果却是空的。你能更新你的问题以了解确切的问题吗？为了更清楚，我添加了其他信息。您的解决方案可以工作、输出并更新隐藏值字段，但由于某些原因，它在表单提交过程中不再被传递。我最初发布的代码就是我在更新单个选项并传递时使用的代码。我不知道现在的区别是什么，它将不再传递值。我发现问题是由于我使用.text（）而不是.val（）输出。它在我的原始实例上有效，但在这个实例上无效。
$('#TopicID').change(function(){
   var selectedText = $(this).find(':selected').map(function(){
       return $(this).text(); //$(this).val()
   }).get().join('|');
   console.log(selectedText);
});