SHOW/HIDE DIV BASED ON DATA ATTRIBUTE

by jespersgaard

HTML

<body>
    <select id="test" name="test">
        <option value="" data-id="">Select</option>
        <option value="1" data-id="a">Option 1</option>
        <option value="2" data-id="b">Option 2</option>
        <option value="3" data-id="c">Option 3</option>
        <option value="4" data-id="d">Option 4</option>
        <option value="5" data-id="e">Option 5</option>
    </select>
    <div id="something">Show Something</div>

JavaScript

$(document).ready(function () {
    toggleFields();
    $("#test").change(function () {
        toggleFields();
    });
});

function toggleFields() {
    if ($("#test option:selected").data('id') == 'a') {
        $("#something").show();
    } else {
        $("#something").hide();
    }
}