如何在使用 jQuery 分离后附加选择选项

Question

在根据表单的初始选择选项的值分离选择选项后，我无法弄清楚如何附加选择选项。

这是我的表单的 HTML：

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

这是我编写的 jQuery 代码：

$(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 ***** //

在过去几个小时浏览了 stackoverflow 之后，我不确定我是否正在以最好的方式解决这个问题，但我似乎找不到解决方案！对初学者的任何建议将不胜感激！

我已经在这里将我的代码上传到 jsfiddle：http://jsfiddle.net/nness/L9v6ejvt/

您难道不知道吗？使用 Chrome 时，.show() 和 .hide() 在我的 PC 上似乎可以完美运行！还有其他人在 Mac 上使用 Chrome 吗？.. 如果是这样，有什么想法为什么它会播放吗？最可悲的是，如果我从一开始就使用 PC，这将为我节省一天中最好的时间！谢谢大家的建议，非常感谢！

Answer 1

如果可以为select添加对应的类如下：

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

您可以简单地隐藏和显示它们

$(document).ready(function () {
  $('#cinema').on('change', function (ev) {
    $('#time option').hide();
    $("."+this.value).show();
  });
});

Updated Fiddle

旁注：不必要的DOM 操作真的很糟糕......

Answer 2

您可以设置自定义 HTML 属性，然后使用 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

更新 1： 我有很好的解决方案

<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

更新 2： 便于管理

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