Question

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

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

以下代码减去＆＃34; .join（＆＃39; |＆＃39;）＆＃34;将值输出到隐藏字段，然后通过POST传递到数据存储。

这是我的代码：

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

如果我删除＆＃34; .join（＆＃39; |＆＃39;）＆＃34;我尝试了多个版本才能使其正常工作输出给了我连接的所有值。

值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中，当我选择一个或多个选项时，我看到值正在正确更新，但由于某种原因，值在提交过程中丢失。我不会发现可能发生的不同情况。

Answer 1

使用map()

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何通过管道分隔隐藏字段

1 个答案: