jQuery code not working in widgets page

by

The reason this probably doesn’t work is because WordPress uses noConflict() mode. From The Codex:

The jQuery library included with WordPress is set to the noConflict() mode ( see wp-includes/js/jquery/jquery.js ). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available

What you’ll need to do is something like this:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#select').change(function() {
             $("#" + this.value).show().siblings().hide();
        });
        $("#select").change();
    });
</script>

This line: jQuery(document).ready(function($) { tells JQuery to use the $ alias so that you can continue writing JQuery like you’re used to seeing.

JQuery is not my strong-suit. I was able to get it working though, try this:

function form() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('select#select').change( function() {
                    $( '#hide_show div' ).css('display', 'none');
                    $( '#hide_show #' + this.value ).css('display', 'block');
                });
            });
        </script>

        <style type="text/css">
            #hide_show div  {display: none;}
        </style>
         
        <select class="widefat" id="select">
            <option value="ad1">ad1</option>
            <option value="ad2">ad2</option>
            <option value="ad3">ad3</option>
        </select>
         
        <div id="hide_show">
            <div id="ad1">ad1</div>
            <div id="ad2">ad2</div>
            <div id="ad3">ad3</div>
        </div>
    <?php
}