HTML Lists Hierarchical Select

by colin_young

HTML

<ul class='gym-location'>
    <li class='item-1'><a href="item-1.1">Item 1.1</a></li>
    <li class='item-1'><a href="item-1.2">Item 1.2</a></li>
    <li class='item-2'><a href="item-2.1">Item 2.1</a></li>
    <li class='item-2'><a href="item-2.2">Item 2.2</a></li>
    <li class='item-2'><a href="item-2.3">Item 2.3</a></li>
</ul>

<select class='gym-type'>
    <option label='type-1' value='item-1'></option>
    <option label='type-2' value='item-2'></option>
</select>

<select class='gym-location'>
</select>

JavaScript

$('ul.gym-location').hide();
$('select.gym-location').empty();
$('select.gym-type').prepend(
    $('<option>')
        .text('I am interested in')
        .val('')
        .attr('selected', 'selected')
);

$('select.gym-type').change(function () {
    var $gym_type = $(this).val();

    $('select.gym-location').empty();
    $('select.gym-location').append(
        $('<option>').text('Select location').val('')
    );
    $('ul.gym-location>li.' + $gym_type).each(function () {
        $('select.gym-location').append(
            $('<option>')
                .text($(this).text())
                .val($(this).find('a').attr('href'))
        );
    });
    
    return false;
});

$('select.gym-location').change(function () {
    var $newPage = $(this).val();
    
    if ($newPage) {
        alert($newPage);
        //window.location.href = $newPage;
    }
});