如何合并三个不同字段的值，只有当三个字段都填满值时才将其设置为隐藏字段？

Question

我在表格上有六个字段，用于显示开始时间和结束时间 小时：分钟 AM/PM 格式如下：

                    <div class="block-time-term" style="padding-bottom:10px;">
                      <label>Starts at :</label>
                      <select name="hours_start" id="hours_start">
                        <option value="">hh</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                      </select>
                      <select name="minutes_start" id="minutes_start">
                        <option value="">mm</option>
                        <option value="0">00</option>
                        <option value="5">05</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                        <option value="35">35</option>
                        <option value="40">40</option>
                        <option value="45">45</option>
                        <option value="50">50</option>
                        <option value="55">55</option>
                      </select>
                      <select name="am_pm_start" id="am_pm_start">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>        
                      </select>
                      <br><br>
                      <label>Ends at :</label>
                      <select name="hours_end" id="hours_end">
                        <option value="">hh</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                      </select>
                      <select name="minutes_end" id="minutes_end">
                        <option value="">mm</option>
                        <option value="0">00</option>
                        <option value="5">05</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                        <option value="35">35</option>
                        <option value="40">40</option>
                        <option value="45">45</option>
                        <option value="50">50</option>
                        <option value="55">55</option>
                      </select>
                      <select name="am_pm_end" id="am_pm_end">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>        
                      </select>
                      </div>

现在表单上有两个隐藏字段，如下所示：

<input type="hidden" name="val[start_time]" id="start_time" value=""/>      
<input type="hidden" name="val[end_time]" id="end_time" value=""/>

现在我想做的是，当用户从各自的下拉列表中选择所有值时，才应合并所选值并存储在各自的隐藏字段中。

例如，如果用户从小时选择开始时间 2，从分钟和下午选择 30，那么要形成和存储的字符串应该是 02:35 PM。同样应适用于结束日期。

如果缺少任何内容，应显示适当的警告消息。我应该如何使用 jQuery/Javascript 实现此目的？

谢谢。

Answer 1

我已经为你创建了一个 JSFiddle。我使隐藏的文本框可见，以便您检查输出。最好在生产中用 DIV 替换 alert 消息。希望这有帮助。

http://jsfiddle.net/su8898/m5r140cy/4/

如何合并三个不同字段的值，只有当三个字段都填满值时才将其设置为隐藏字段？

How to combine values from three different fields and set it to the hidden field only when all the three fields are filled with values?

javascript

jquery

html-select

string-concatenation

hidden-field