Arshad Ali Arshad Ali - 6 months ago 15
Javascript Question

Can't add <option> to <select> correctly using jQuery

I've simple html code and dynamically adding some

<li>
elements to
#place
using this code



$(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();


$('.' + settings.seatCss).click(function () {

if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
var str = [], item;
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {

var option = document.createElement("option");

option.value = str.push($(this).attr('title'));;
option.text = str.push($(this).attr('title'));;
option.selected = 'selected';
select.appendChild(option);
});

$(this).toggleClass(settings.selectingSeatCss);
}
});

$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})

$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});

#holder{
height:200px;
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("img") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
}
#place .selectedSeat
{
background-image:url("img");
}
#place .selectingSeat
{
background-image:url("img");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription{
padding:0px;
}
#seatDescription li{
verticle-align:middle;
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="selected-seats" ></select><br><br>
<div id="place"></div>





at lines

$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {

var option = document.createElement("option");

option.value = str.push($(this).attr('title'));;
option.text = str.push($(this).attr('title'));;
option.selected = 'selected';
select.appendChild(option);
});


I have couple of issues:

1- I can not find a way to get title of selected seat

2- I can not find a way to get child of select element removed if it is un-selected

For a working demo of app with clear understanding, Please visit Here

Can any one suggest me a solution to that need.

Answer

Try this script and check it may work for you,

<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>