Class SelectSelector

セレクトメニューにオプションエリアを連動させる

by Tenderfeel

HTML

<form>
    <table>
        <tr>
            <th>Menu</th>
            <td>
            <select name="reservemenu" id="reserve-menu">
                <optgroup label="フルーツ" id="menu-fruit">
                    <option value="りんご">りんご</option>
                    <option value="みかん">みかん</option>
                    <option value="バナナ">バナナ</option>
                </optgroup>
                <optgroup label="魚" id="menu-fish">
                    <option value="サンマ">サンマ</option>
                    <option value="イワシ">イワシ</option>
                    <option value="アジ">アジ</option>
                </optgroup>
                <optgroup label="肉" id="menu-meat">
                    <option value="豚肉">豚肉</option>
                    <option value="牛肉">牛肉</option>
                    <option value="鶏肉">鶏肉</option>
                </optgroup>
            </select>
            </td>
        </tr>
        <tr class="options hide">
            <th>Option</th>
            <td>
                <div id="opt-fruit" class="option hide">
                    <label><input type="checkbox" value="有機栽培">
                        有機栽培</label><br>
                    <label>サイズ：<select name="option[]">
                        <option value="Size S">S</option>
                        <option value="Size M">M</option>
                        <option value="Size L">L</option>
                        </select></label>
                </div>
                <div id="opt-fish" class="option hide">
                    <label><input type="checkbox" value="鮮魚">
                        鮮魚</label><br>
                    <label>サイズ：<select name="option[]">
                        <option value="Size S">S</option>
                        <option value="Size M">M</option>
                        <option value="Size L">L</option>
                        </select></label>
                </div>
                <div id="opt-meat" class="option hide">
                    <label><input type="text"...

CSS

table {
    border-collapse:collapse;
}
table, th, td {
    border:solid 1px #efefef;
}
th {
    background-color:#f6f6f6;
    padding:0.5em;
}
td {
    padding:0.5em;
    white-space:nowrap;
}

.hide {
    display:none;
}

JavaScript

(function($) {
this.SelectSelector = new Class({
    Implements: [Options],
    
    options: {
        selectorIdPrefix:'menu-',
        optionIdPrefix:'opt-',
        optionParentClass:'options',
        optionWrapClass:'option'
    },
    
    initialize: function(element, options) {
        this.setOptions(options);
        this.element = $(element);
        
        this.attachEvent();
    },
    
    attachEvent: function() {
        var self = this;
        var options = this.options;
        this.element.addEvent('change', function(){
            var p = this.getSelected().getParent('[id^='+options.selectorIdPrefix+']').shift();
            var opt = $(options.optionIdPrefix+ p.id.replace(options.selectorIdPrefix,''));
            self.hide($$('.'+options.optionParentClass));
        
            if(opt){
                $$('.'+options.optionParentClass).removeClass('hide');
                opt.removeClass('hide');
            }
        });
        
    },
    hide:function(arr){
        var options = this.options;
        var self = this;
            
        arr.each(function(el){
            if($type(el)==='element'){
                el.addClass('hide');
            }
            var childs = el.getElements('.'+options.optionWrapClass);
            if(childs) {self.hide(childs);}
        });
    }
    
});
})(document.id);

window.addEvent('domready', function(){
    new SelectSelector($('reserve-menu'));
});