答案 0 :(得分:1)
尝试使用此脚本并检查它是否适用于您,
<script>
$(function () {
select = document.querySelector("select[name='selected-seats']");
var settings = {
rows: 4,
cols: 12,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 45,
seatHeight: 45,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
init();
$('.seat').click(function () {
if ( $( this ).hasClass( "selectingSeat" ) ) {
$(this).removeClass("selectingSeat");
}else{
$(this).addClass("selectingSeat");
}
options="";
$("#place .seat").each(function () {
if ( $( this ).hasClass( "selectingSeat" ) ) {
options+="<option>"+$( this ).find("a").attr("title")+"</option>";
}
});
$("[name='selected-seats']").html(options);
});
});
</script>
答案 1 :(得分:0)
你可以试试这个: -
而不是你单独指定的那个功能$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).addClass(settings.selectedSeatCss)
var str = [], item;
select.innerHTML = "";
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
var option = document.createElement("option");
option.value = $(this).attr('title');
option.text = $(this).attr('title');
option.selected = 'selected';
select.appendChild(option);
});
$(this).toggleClass(settings.selectingSeatCss);
}
});
你错过了两件事。
selectedSeatCss
,则表示您没有添加。