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

Question

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

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

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

这是我的代码:

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

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

值 1:树值 2:船值 3:汽车

输出如下:treeboatcar

但我需要:树|船|车

我已经更新我的新代码，以将此线程中 Loading... 建议的解决方案反射(reflect)到以下内容中。

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

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

现在可以使用竖线分隔值正确更新隐藏字段值，但在表单中提交时，该值不再通过 POST 调用传递。

隐藏字段

在 Firebug 中，当我选择一个或多个选项时，我看到值被正确更新，但由于某种原因，该值在提交过程中丢失了。我认为这可能发生的地方没有太大不同。

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>