使用 javascript 选择 jQuery CSS 类型下拉列表

>最近，我开始编写一个脚本来自动填写一些电子表格。我在如何选择jQuery + CSS类型下拉列表时遇到了麻烦。

下拉列表如下：

.HTML：

<script>
    $(document).ready(function() {
        $("#DropDownList").DropDownList({
            genislik: "250"
        });
    })
</script>
<div class="DropDownList" id="DropDownList">
    <div class="DropDownListHeader"><span>Lütfen seçiniz...</span>
        <div class="arrow-bottom"></div>
    </div>
    <ul>
        <li><a href="#1" data-val="1">Lorem ipsum 1</a>
        </li>
        <li><a href="#1" data-val="2">Lorem ipsum 2</a>
        </li>
        <li><a href="#1" data-val="3">Lorem ipsum 3</a>
        </li>
        <li><a href="#1" data-val="4">Lorem ipsum 4</a>
        </li>
        <li><a href="#1" data-val="5">Lorem ipsum 5</a>
        </li>
    </ul>
</div>

Javascript：

(function(jQuery){
    $.fn.DropDownList = function(ayarlar){
            var varsayilan={
                    tetikleme       :"click",
                    genislik        :"200",
                    cerceve         :"1px solid #2d3a43",
                    kenarYuvarlama  :"4",
                    listeBaslikRenk :"#0a6b7c",
                    listeBaslikYazi :"#ffffff",
                    listeBaslikHover:"#da4e41",
                    listeRenk       :"#c0d7e5",
                    listeCerceve    :"1px solid #2d3a43",
                    listeYazi       :"#000000",
                    linkHover       :"#a0b6c4",
                    linkSeciliRenk  :"#da4e41",
                    linkSeciliYazi  :"#ffffff",
                    okRenk          :"#ffffff"
                };
            var ayarlar=$.extend(varsayilan,ayarlar);
            return this.each(function(){
                    var container=$(this).attr("id");
                    container="#"+container;
                    $("<style>"+container+">div:hover{background:"+ayarlar.listeBaslikHover+" !important} "+container+" ul a:hover{background:"+ayarlar.linkHover+"} "+container+" ul a.Selected{background:"+ayarlar.linkSeciliRenk+";color:"+ayarlar.linkSeciliYazi+" !important}</style>")
                        .appendTo("head");
                    $(container+" .DropDownListHeader .arrow-bottom")
                        .css({
                                "border-top-color":ayarlar.okRenk
                            });
                    $(container)
                        .css({
                                "width":ayarlar.genislik,
                                "border":ayarlar.cerceve,
                                "border-radius":ayarlar.kenarYuvarlama+"px"
                            });
                    $(container+" .DropDownListHeader")
                        .css({
                                "background":ayarlar.listeBaslikRenk,
                                "color":ayarlar.listeBaslikYazi
                            });
                    $(container).find("a")
                        .css({
                                "color":ayarlar.listeYazi
                            });
                    $(container+" ul")
                        .css({
                                "background":ayarlar.listeRenk,
                                "border":ayarlar.listeCerceve,
                                "border-radius":"0 0 "+ayarlar.kenarYuvarlama+"px "+ayarlar.kenarYuvarlama+"px"
                            });
                    $(container+" .DropDownListHeader").click(function(){
                            $(this).next()
                                .slideDown(100);
                        });
                    $(container).hover(function(){},function(){
                            $(this).children("ul")
                                .slideUp(150);
                        });
                    $(container).find("a").click(function(){
                            var txt=$(this).text();
                            var deger=$(this).attr("data-val");
                            $(container).find(".DropDownListHeader")
                                .children("span")
                                .text(txt)
                                .attr("data-val",deger);
                            $(container+" a")
                                .removeClass("Selected");
                            $(this)
                                .addClass("Selected");
                            $(container).children("ul")
                                .slideUp(150);
                        });
                });
        };
})(jQuery);

.CSS：

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif
}
.DropDownList {
    margin:10px auto;
    position:relative
}
.DropDownList>div {
    padding:3px 20px 3px 3px;
    cursor:pointer;
    height:20px;
    overflow:hidden
}
.DropDownList ul {
    list-style-type:none;
    margin:0;
    padding:0;
    display:none;
    position:absolute;
    right:0;
    left:0;
    border-top:none !important;
    overflow:hidden
}
.DropDownList ul a {
    display:block;
    padding:3px;
    text-decoration:none;
}
/*AddOn*/
 .arrow-bottom {
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #fff;
    top:3px;
    position:absolute;
    right:3px;
    top:10px
}

http://jsfiddle.net/hvsonmez/PqEeA/1/w/

这是我的测试脚本，但不起作用。

$("DropDownList ul li.selected").removeClass("selected");
$("DropDownList ul li[data-val=1]").addClass("selected");

参考：JQuery 下拉列表选择

非常感谢。