How to append select options after detaching them using jQuery - html

Question

I'm having trouble trying to figure out how to append select options after detaching them based on the value of the initial select option of a form.
Here's the HTML for my form:
<form id="booking-form" action="#" method="post">
<legend class="bold">Bookings</legend>
<div class="input clearfix required">
<label for="cinema">Cinema</label>
<select name="cinema" id="cinema">
<option value></option>
<option value="maxima">Cinema Maxima</option>
<option value="rivola">Cinema Rivola</option>
</select>
<div class="error">
<p>Please select a cinema</p>
</div>
</div>
<div class="input clearfix required">
<label for="day">Day</label>
<select name="day" id="day">
<option value></option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input clearfix required">
<label for="time">Time</label>
<select name="time" id="time">
<option value></option>
<option value="12">12pm</option>
<option value="3">3pm</option>
<option value="4">4pm</option>
<option value="6">6pm</option>
<option value="7">7pm</option>
<option value="9">9pm</option>
</select>
<div class="error">
<p>Please select a time</p>
</div>
</div>
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
And here's the jQuery code I've written:
$(document).ready(function(){
// ***** Begin Booking Form Manipulation ***** //
// If Cinema Maxima is selected, remove Cinema Rivola time options
$('#cinema').change(function() {
if( $('#cinema').val() == 'maxima') {
$('#time option[value="12"]').detach();
$('#time option[value="4"]').detach();
$('#time option[value="7"]').detach();
}
// Else, remove Cinema Maxima time options
else {
$('#time option[value="3"]').detach();
$('#time option[value="6"]').detach();
$('#time option[value="9"]').detach();
}
});
// If Cinema Maxima is selected but weekend session is not selected, remove 3pm time option
$('#day').change(function() {
if( $('#cinema').val() == 'maxima' && $('#day').val() != 'saturday' || 'sunday') {
$('#time option[value="3"]').detach();
}
});
});
// ***** End Booking Form Manipulation ***** //
I'm not sure I've I'm approaching this the best way after having spent the last few hours trawling through stackoverflow, but I can't seem to find a solution! Any advice for a beginner would be greatly appreciated!
I've upload my code to jsfiddle here: http://jsfiddle.net/nness/L9v6ejvt/
Wouldn't you know it - .show() and .hide() seem to work perfectly on my PC when using Chrome! Is anyone else using Chrome on Mac?.. If so, any thoughts as to why it's playing up? The saddest part is had I been using the PC from the get-go this would have saved me the best part of a day! Thanks for all your suggestions guys, all very much appreciated!

Answer 1

If you can add the corresponding classes for the select as follows:
<select name="time" id="time">
<option value></option>
<option value="12" class="rivola">12pm</option>
<option value="3" class="maxima">3pm</option>
<option value="4" class="rivola">4pm</option>
<option value="6" class="maxima">6pm</option>
<option value="7" class="rivola">7pm</option>
<option value="9" class="maxima">9pm</option>
</select>
You can simply hide and show them like
$(document).ready(function () {
$('#cinema').on('change', function (ev) {
$('#time option').hide();
$("."+this.value).show();
});
});
Updated Fiddle
Side note: unnecessary DOM manipulation is really bad...

Answer 2

You can set custom HTML attributes and then use jQuery
<option value="maxima" exceptitems="12,9">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
$('#time option').show();
var opt=$("option:selected", this);
var exceptItems=opt.attr('exceptitems');
if(exceptItems)
{
var items=exceptItems.split(",");
for (i = 0; i < items.length; i++) {
$('#time option[value="'+items[i]+'"]').hide();
}
}
});
});
DEMO1
Update 1:
I have nice solution
<option value="maxima" data-command="$('#time option[value=12]').hide()">Cinema Maxima</option>
JQuery
$(document).ready(function(){
$('#cinema').on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
});
DEMO2
Update 2: For easy management
$.fn.extend({
executeCommand: function() {
return this.on('change', function(ev) {
var opt=$("option:selected", this);
var strCommand=opt.data("command");
eval(strCommand);
});
}
});
$('#cinema').executeCommand();
DEMO3