javascript - 如何组合来自三个不同字段的值，并仅当三个字段都填充了值时才将其设置为隐藏字段？

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(分钟)和 PM，则要形成和存储的字符串应为02:35 PM。同样应该适用于结束日期。

如果缺少任何内容，应出现适当的警报消息。我应该如何使用 jQuery/Javascript 实现这一点？

谢谢。

Answer 1

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

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