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/

你不知道吗 - .show（）和.hide（）似乎在使用Chrome时在我的电脑上完美运行！还有其他人在Mac上使用Chrome吗？..如果是这样，有什么想法为什么它会播放？最悲伤的部分是，如果我从一开始就使用PC，这将为我节省一天中最好的部分！感谢您提出的所有建议，非常感谢！

Answer 1

您可以设置自定义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

Answer 2

如果您可以为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操作非常糟糕......

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

2 个答案:

DEMO1

DEMO2

DEMO3