如何通过管道分隔隐藏字段中的多个 select

Question

我有一个表格，有 3 个下拉菜单来制作 select 离子，第一个下拉菜单允许用户 select 特定类型，第二个框，用户必须 select 一个日期，然后将在 Jquery 中完成的第 3 个下拉列表中向用户显示过滤后的选项。我让它在第三个下拉菜单中只有 select 一个选项的用户工作。

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

下面的代码减去“.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 中，当我 select 一个或多个选项时，我看到值正在正确更新，但由于某种原因，该值在提交过程中丢失了。我看不出有什么不同。

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>

如何通过管道分隔隐藏字段中的多个 select

How to separate by pipe for multiple select in hidden field

javascript

jquery

select

hidden-field

multiple-select