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

如果缺少任何内容，应显示正确的警告消息。我应该如何使用jQuery / Javascript实现这一目标？

感谢。

Answer 1

我为你创建了一个JSFiddle。我让隐藏的文本框可供您查看输出。最好在生产中用alert替换DIV条消息。希望这会有所帮助。

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

如何组合来自三个不同字段的值并仅在所有三个字段都填充值时将其设置为隐藏字段？

1 个答案: