Tabs with Selector

by clayshannon

HTML

<button id="btn">Hey I'm a button</button>
<div id="tabs">
    <ul>
        <li><a href="#tab-Books">Books</a>

        </li>
        <li><a href="#tab-Movies">Movies</a>

        </li>
        <li><a href="#tab-Music">Music</a>

        </li>
    </ul>
    <div id="tab-Books">
        <select id="bookDropDown">
            <option value="Pulitzer">Pulitzer</option>
            <option value="NBCC">National Book Critics Circle</option>
            <option value="NBA">National Book Awards</option>
            <option value="Caldecott">Caldecott</option>
        </select>
        <div id="BooksContent">Content in Books tab</div>
    </div>
    <div id="tab-Movies">
        <select id="moviesDropDown">
            <option value="Academy">Academy</option>
            <option value="GoldenGlobe">Golden Globe</option>
            <option value="Cannes">Cannes Film Festival</option>
            <option value="Sundance">Sundance</option>
        </select>
        <div id="MoviesContent">Content in Movies tab</div>
    </div>
    <div id="tab-Music">
        <select id="musicDropDown">
            <option value="Grammies">Grammies</option>
            <option value="AMA">American Music Awards</option>
            <option value="CMA">Country Music Awards</option>
            <option value="Indies">Indies</option>
        </select>
        <div id="MusicContent">Content in Music tab</div>
    </div>
</div>

CSS

.ui-button-text-only .ui-button-text{
    padding: .2em .5em;
    line-height:1.2;
    font-size:0.8em;
}

JavaScript

function getPulitzers() {
    alert('you called getPulitzers!');
}

$('button').button();
$("#tabs").tabs();
$('#bookDropDown').change(function () {
    var sel = this.value;
    //alert('you selected '+ sel);
    // based on sel, set val that will be passed to getJSON as first arg (file name)
    $('#BooksContent').text('you selected '+ sel);
    if (sel == 'NBCC') {
        getPulitzerJSON();
    }
});
$('#moviesDropDown').change(function () {
    var sel = this.value;
    $('#MoviesContent').text('you selected '+ sel);
});
$('#musicDropDown').change(function () {
    var sel = this.value;
    $('#MusicContent').text('you selected '+ sel);
});