例子如图:当点击Add Hours按钮时将获取select选项的值并添加到上面。当点击remove时则删除对应html元素。
并且,我在这里限制能添加的个数,当超过个数的时候进行报错(没超过的时候不显示报错的div).
页面代码如下:
<dd>
<select name="weekday" id="weekday" class="sel01">
<option value="Mon" selected=selected>Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
<option value="Mon-Fri" selected=selected>Mon-Fri</option>
<option value="Mon-Sun">Mon-Sun</option>
<option value="Sat-Sun">Sat-Sun</option>
</select>
<select name="hours-start" id="hours-start" class="sel02">
<option value="6:00 am">6:00 am</option>
<option value="6:30 am">6:30 am</option>
<option value="7:00 am">7:00 am</option>
<option value="7:30 am">7:30 am</option>
<option value="8:00 am" selected=selected>8:00 am</option>
<option value="8:30 am">8:30 am</option>
<option value="9:00 am">9:00 am</option>
<option value="9:30 am">9:30 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:30 am">10:30 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:30 am">11:30 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="15.5">3:30 pm</option>
<option value="3:30 pm">4:00 pm</option>
<option value="4:30 pm">4:30 pm</option>
<option value="5:00 pm">5:00 pm</option>
<option value="5:30 pm">5:30 pm</option>
<option value="6:00 pm">6:00 pm</option>
<option value="6:30 pm">6:30 pm</option>
<option value="7:00 pm">7:00 pm</option>
<option value="7:30 pm">7:30 pm</option>
<option value="8:00 pm">8:00 pm</option>
<option value="8:30 pm">8:30 pm</option>
<option value="9:00 pm">9:00 pm</option>
<option value="9:30 pm">9:30 pm</option>
<option value="10:00 pm">10:00 pm</option>
<option value="10:30 pm">10:30 pm</option>
<option value="11:00 pm">11:00 pm</option>
<option value="11:30 pm">11:30 pm</option>
<option value="12:00 am">12:00 am</option>
<option value="12:30 am">12:30 am</option>
<option value="1:00 am">1:00 am</option>
<option value="1:30 am">1:30 am</option>
<option value="2:00 am">2:00 am</option>
<option value="2:30 am">2:30 am</option>
<option value="3:00 am">3:00 am</option>
<option value="3:30 am">3:30 am</option>
<option value="4:00 am">4:00 am</option>
<option value="4:30 am">4:30 am</option>
<option value="5:00 am">5:00 am</option>
<option value="5:30 am">5:30 am</option>
</select>
<select name="hours-end" id="hours-end" class="sel02">
<option value="6:00 am">6:00 am</option>
<option value="6:30 am">6:30 am</option>
<option value="7:00 am">7:00 am</option>
<option value="7:30 am">7:30 am</option>
<option value="8:00 am">8:00 am</option>
<option value="8:30 am">8:30 am</option>
<option value="9:00 am">9:00 am</option>
<option value="9:30 am">9:30 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:30 am">10:30 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:30 am">11:30 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="15.5">3:30 pm</option>
<option value="3:30 pm">4:00 pm</option>
<option value="4:30 pm">4:30 pm</option>
<option value="5:00 pm">5:00 pm</option>
<option value="5:30 pm" selected=selected>5:30 pm</option>
<option value="6:00 pm">6:00 pm</option>
<option value="6:30 pm">6:30 pm</option>
<option value="7:00 pm">7:00 pm</option>
<option value="7:30 pm">7:30 pm</option>
<option value="8:00 pm">8:00 pm</option>
<option value="8:30 pm">8:30 pm</option>
<option value="9:00 pm">9:00 pm</option>
<option value="9:30 pm">9:30 pm</option>
<option value="10:00 pm">10:00 pm</option>
<option value="10:30 pm">10:30 pm</option>
<option value="11:00 pm">11:00 pm</option>
<option value="11:30 pm">11:30 pm</option>
<option value="12:00 am">12:00 am</option>
<option value="12:30 am">12:30 am</option>
<option value="1:00 am">1:00 am</option>
<option value="1:30 am">1:30 am</option>
<option value="2:00 am">2:00 am</option>
<option value="2:30 am">2:30 am</option>
<option value="3:00 am">3:00 am</option>
<option value="3:30 am">3:30 am</option>
<option value="4:00 am">4:00 am</option>
<option value="4:30 am">4:30 am</option>
<option value="5:00 am">5:00 am</option>
<option value="5:30 am">5:30 am</option>
</select><input name="" type="button" id="Addworktime" class="ediBtn02" style="vertical-align: middle" /></dd>
</dl>
<div id="HoursError" class="C_Error" style="display: none">
You can only add 7.<span></span></div>
JS代码如下:
var count = 0;
var countid = 0;
$("#Addworktime").click(function() {
var d = document.createElement("dd");
var a = document.createElement("a");
var c = document.createElement("input");
var newworktime = $("#weekday").val() + " " + $("#hours-start").val() + " - " + $("#hours-end").val();
var newa = "Remove";
d.innerHTML = newworktime;
d.id = "hourslist" + count;
var newid = "hourslist" + count;
a.innerHTML = newa;
a.id = countid;
a.style.cursor = "pointer";
c.style.display = "none";
c.value = newworktime;
c.id = "WorkTime" + count;
if(count > 6)
{
$("#HoursError").show();
}
else
{
$("#HoursError").hide();
if (count > 0) {
$("#hourslist" + (count - 1)).after(d);
}
else {
$("#hourslistlocal").after(d);
}
$("#" + newid).append(a);
$("#" + countid).addClass("remove");
$("#header").after(c);
count++;
countid++;
}
});
$(".remove").live("click", function() {
var id = "hourslist" + this.id;
$("#" + id).hide();
count--;
countid--;
if(count < 7)
{
$("#HoursError").hide();
}
});
有问题可以问我,互相讨论,