JSFiddle - React, Tailwind, and code Playground

by yeuem1vannam

HTML

<select class='theSelect' size='1'>
    <option selected='selected'>---</option>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
</select>

JavaScript

var selectable = {1: "One", 2: "Two", 3: "Three"}
function cal_selectable(){
    var selectable_temp = selectable;
    $(".theSelect").each(function(i){
        delete selectable_temp[$(this).val()];
    })
    return selectable_temp;
}

function append_select(selectable_temp){
    var new_select = $("<select/>", {
        class: "theSelect",
        change: function(e){
            select_recal();
        },
    });

    $(".theSelect:last").after(new_select);
}

function option_recal(selectable_temp){
    $(".theSelect").each(function(j){
        var that = $(this)
        var selectable_temp_dup = selectable_temp;
        $(this).find("option:not(:selected)").each(function(k){
            var o_val = $(this).val();
            if (o_val == '---'){
                // do nothing;
            } else if (selectable_temp_dup.hasOwnProperty(o_val)){
                console.log([o_val, selectable_temp_dup]);
                delete selectable_temp_dup[o_val];
            } else {
                $(this).remove();
            };
        });
        if (!$.isEmptyObject(selectable_temp_dup)){
            $.each(selectable_temp_dup, function(k,v){
                that.append($("<option/>", {value: k, text: v}));
            });
        }
    });
}

function select_recal(){
    var selectable_temp = cal_selectable();
    selectable_temp["---"] = "---";
    if ($.isEmptyObject(selectable_temp)) { return };   
    append_select(selectable_temp);
    option_recal(selectable_temp);
}

$(function(){
    $(".theSelect").change(function(e){select_recal()});
})