Change DIV on changing drop down using jQuery

Change DIV on changing drop down using jQuery

Hi,

I am new to jQuery. I tried to use the following code in my site but it’s not working.
Please help me .

Thanks in advance

Raj

<!DOCTYPE HTML>
<head>
    <meta http-equiv="content-type" content="text/html" />
   
    <style>
    .box{
        display:block;
        padding: 15px;
        border: 1px solid #ddd;
        background: #eee;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
   
    #selectField{
        border: 1px solid #ddd;
        width: 200px;
    }</style>
   
    <script type="text/javascript">
        $(document).ready(function () {
        $('.box').hide();
        $('#option1').show();
        $('#selectField').change(function () {
            $('.box').hide();
            $('#'+$(this).val()).show();
        });
    });
    </script>
    <title>Untitled 2</title>
</head>

<body>
<select id="selectField">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>
    </select>
   
    <div id="option1" class="box">Content 1</div>
    <div id="option2" class="box">Content 2</div>
    <div id="option3" class="box">Content 3</div>
    <div id="option4" class="box">Content 4</div>


</body>
</html>