动态添加下拉菜单并排除所选选项

Question

As I mentioned in the title, I'm trying to build dynamic dropdown menus. Once user chooses from list option, the same option is excluded (disabled) from other dropdowns.

So far I have built Add/Remove functionality. But I have no clue where to start with this problem with disabling selected options.

Here's jsfiddle link

   $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });




    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

var defaultTime = "<option selected disabled>Choose time</option><option>Whole day</option>";
var i, b, a, clock = "";
var min = ["00", "15", "30", "45"];

for(a = 0; a <= 1; a++){
    if(a == 0){
        for (i = 0; i <= 11; i++) {
            if(i <= 9) {
                for (b = 0; b < min.length; b++) {
                    clock += "<option>" + "0" + i + ":" + min[b] + " AM" + "</option>";
                }
            }else{
                for (b = 0; b < min.length; b++) {
                    clock += "<option>" + i + ":" + min[b] + " AM" + "</option>";
                }
            }
        }
    }else{
        for (i = 0; i <= 11; i++) {
            if(i <= 9) {
                for (b = 0; b < min.length; b++) {
                    clock += "<option>" + "0" + i + ":" + min[b] + " PM" + "</option>";
                }
            }else{
                for (b = 0; b < min.length; b++) {
                    clock += "<option>" + i + ":" + min[b] + " PM" + "</option>";
                }
            }
        }
    }
}

document.getElementById("clock").innerHTML = defaultTime + clock;

Any idea where should I start? Any help would be helpful.

Thank You!

Answer 1

You have to make object of selected options as:

        var foo = []; 
          $('.times :selected').each(function(i, selected){ 
          foo[i] = $(selected).text(); 
        });

After this just set option disable with values which are in foo object

        $.each(foo, function(entry){
            console.log(foo[entry]);
            $(".times option:contains('"+foo[entry]+"')").attr("disabled","disabled");
        });

Fiddle Link: https://jsfiddle.net/k4do7Lg2/1/