Using javascript to select jQuery CSS type drop down list

Question

Recently, I started to write a script to auto fill in some E-Form. I got trouble on how to select jQuery+CSS type dropdownlist.

The drop down list is as below:

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/

This is my testing script but not work.

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

Reference: JQuery drop-down list selection

Many thanks.

Answer 1

Try the below jquery

Instead of

$("DropDownList ul li.selected").removeClass("selected"); //Css class not available in your css
$("DropDownList ul li[data-val=1]").addClass("selected");

Change

$(document).ready(function() {
  $(".DropDownListHeader").empty();
  $(".DropDownListHeader").append("<span data-val='1'>Lorem ipsum 1</span><div class='arrow-bottom' style='border-top-color: rgb(255, 255, 255);'></div>");
});

DEMO HERE