forked: 2013-10-07 1st

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ddf;
  font: 30px sans-serif;
}

jsdoit.html

<select id="pulldown">
    <option value="01">A/AA/AA1</option>
    <option value="02">A/AA/AA2</option>
    <option value="03">A/AA/AA3</option>
    <option value="04">A/AB/AB1</option>
    <option value="05">A/AB/AB2</option>
    <option value="06">A/AB/AB3</option>
    <option value="07">A/AC/AC1</option>
    <option value="08">A/AC/AC2</option>
    <option value="09">A/AC/AC3</option>
    <option value="10">B/BA/BA1</option>
    <option value="11">B/BA/BA2</option>
    <option value="12">B/BA/BA3</option>
    <option value="13">B/BB/BB1</option>
    <option value="14">B/BB/BB2</option>
    <option value="15">B/BB/BB3</option>
    <option value="16">B/BC/BC1</option>
    <option value="17">B/BC/BC2</option>
    <option value="18">B/BC/BC3</option>
    <option value="19">C/CA/CA1</option>
    <option value="20">C/CA/CA2</option>
    <option value="21">C/CA/CA3</option>
    <option value="22">C/CB/CB1</option>
    <option value="23">C/CB/CB2</option>
    <option value="24">C/CB/CB3</option>
    <option value="25">C/CC/CC1</option>
    <option value="26">C/CC/CC2</option>
    <option value="27">C/CC/CC3</option>
</select>

<select id="L0"></select>
<select id="L1"></select>
<select id="L2"></select>

jsdoit.js

function addOptionTag(selectTag, value, text, parentData) {
    var optionTag = $('<option>', {value:value, text:text});
    if (parentData) {
        optionTag.attr('data-parent', parentData);
    }
    $(selectTag).append(optionTag);
}
    
var tree = [];
$(function() {
    var names0 = [];
    var names1 = [];
    $("#pulldown").hide();

    $("#pulldown").find("option").each(function() {
        var names = $(this).text().split('/');
        if (!tree[names[0]]) {
            tree[names[0]] = []
        }
        if (!tree[names[0]][names[1]]) {
            tree[names[0]][names[1]] = []
        }
        tree[names[0]][names[1]][names[2]] = $(this).val();
        /*
        if (!names0[names[0]]) {
            names0[names[0]] = true;
            addOptionTag('select#L0', names[0], names[0], null);
        }
        if (!names1[names[1]]) {
            names1[names[1]] = true;
            addOptionTag('select#L1', names[1], names[1], names[0]);
        }
        addOptionTag('select#L2', $(this).val(), names[2], names[0] + '/' + names[1]);
        */
    });
    console.log(tree);
    $('select#L0').change();
});

$(document).on('change', 'select#L0', function() {
    console.log('change select#L0');
    var name0 = $('select#L0').val();
    $('select#L1 option').remove();
    for (var name1 in tree[name0]) {
        addOptionTag('select#L1', name1, name1, null);
    }
    $('select#L1').change();
});

$(document).on('change', 'select#L1', function() {
    console.log('change select#L1');
    var name0 = $('select#L0').val();
    var name1 = $('select#L1').val();

    $('select#L2 option').remove();
    for (var name2 in tree[name0][name1]) {
        addOptionTag('select#L2', tree[name0][name1][name2], name2, null);
    }
});

/*
$(document).on('change', 'select#L0', function() {
    var name = $('select#L0').val();
    $('select#L1 option').hide();
    var options = $('select#L1 option[data-parent="' + name + '"]');
    options.show();
    //console.log(options.first().attr('value'));
    $('select#L1').val(options.first().attr('value'));
    //$('select#L1 option[data-parent="' + name + '"]').attr('selected', '');
    //$('select#L1 option[data-parent="' + name + '"]:first').attr('selected', true);
    $('select#L1').change();
});

$(document).on('change', 'select#L1', function() {
    var name0 = $('select#L0').val();
    var name1 = $('select#L1').val();
    $('select#L2 option').hide();
    var options = $('select#L2 option[data-parent="' + name0 + '/' + name1 + '"]');
    options.show();
    console.log(options.first().val());
    //$('select#L2 option[data-parent="' + name0 + '/' + name1 + '"]').attr('selected', '');
    //$('select#L2 option[data-parent="' + name0 + '/' + name1 + '"]:first').attr('selected', true);
    $('select#L2').val(options.first().attr('value'));
});
*/