Select Option javascript is not working

Question 1

There is a faulty selection rule in the JS.

$(this).closest("dt").find("a").html(text);

This is the line that is supposed to update the selected option text. It will never work, because .closest('x') traverses up the parents of the initially-called element until it hits root. Because the element it is looking for is adjacent to one of the parents, it will never find it. Replacing that line with:

$(this).closest("dd").siblings("dt").find("a").html(text);

Means it will find it, by finding the closest parent that the item you seek is adjacent to.

http://jsfiddle.net/Y86Qj/1/

Question 2

<html>

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(".dropdown dt a").click(function(){
    if($(this).hasClass("open")) {
        $(this).blur();
        return false;
    }
    $(this).addClass("open");
    $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
    return false;
}).blur(function() {
    $(this).removeClass("open");
    $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
});
$(".dropdown dd ul a").click(function() {
    var text = $(this).html();
    $(this).closest("dt").find("a").html(text);
    $(this).parents("ul").hide();
    $(this).closest("select").val($(this).find("span.value").html());
    return false;
});



    /* Fancy Dropdowns */
    function FancyDropdowns(selector){
        $(selector).each(function () {
            var source = $(this);
            var selected = source.find("option[selected]");
            var options = $("option", source);
            var markup = '<dl class="dropdown">';
            markup += '<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>';
            markup += '<dd><ul>';
            options.each(function () {
                markup += '<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>';
            });
            markup += '</ul></dd>';
            markup += '</dl>';
            source.after(markup);
            source.hide();
        });
    }

    $(document).ready(function () {
        FancyDropdowns(".dropdown.fancy");
        $(".dropdown dt a").click(function(){
            if($(this).hasClass("open")) {
                $(this).blur();
                return false;
            }
            $(this).addClass("open");
            $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
            return false;
        }).blur(function() {
            $(this).removeClass("open");
            $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
        });
        $(".dropdown dd ul a").click(function() {
            var text = $(this).html();
            $(this).closest("dt").find("a").html(text);
            $(this).parents("ul").hide();
            $(this).closest("select").val($(this).find("span.value").html());
            return false;
        });
    });

    </script>

    <style>
        /* NICER DROPDOWNS */
        .dropdown dd, .dropdown dt, .dropdown ul {
            margin: 0;
            padding: 0;
        }

        .dropdown dd {
            position: relative;
        }

        .dropdown a,.dropdown a:visited {
            color: #666;
            text-decoration: none;
            outline: none;
        }

        .dropdown a:hover {
            color: #e85326;
        }

        .dropdown dt a:hover {
            color: #e85326;
        }

        .dropdown dt a {
            background: #fff url("dropdown-arrow.png") no-repeat scroll right center;
            display: block;
            border: 1px solid #666;
            width: 160px;
            padding: 5px;
        }

        .dropdown dt a span {
            cursor: pointer;
            display: block;
        }

        .dropdown dd ul {
            background: #fff none repeat scroll 0 0;
            border: 1px solid #666;
            color: #666;
            display: none;
            left: 0;
            position: absolute;
            top: 2px;
            width: auto;
            min-width: 170px;
            list-style: none;
            padding: 5px 0;
        }

        .dropdown dd ul li a {
            display: block;
            padding: 5px;
        }

        .dropdown dd ul li a:hover {
            background-color: #333;
        }

        .dropdown img.flag {
            border: none;
            vertical-align: middle;
            margin-left: 10px;
        }

        .dropdown span.value,.flagvisibility {
            display: none;
        }
    </style>

</head>

<body>

<select name="myselect-id" class="dropdown fancy">
    <option selected="selected" value="25">Test 25</option> 
    <option value="26">Test 26</option> 
    <option value="27">Test 27</option> 
    <option value="28">Test 28</option>
    <option value="29">Test 29</option>
    <option value="30">Test 30</option>

</select>

</body>

</html>