使用javascript選擇jQuery CSS類型下拉列表

最近，我開始寫一個腳本來自動填寫一些電子表格。我在如何選擇jQuery + CSS類型下拉列表時遇到了麻煩。使用javascript選擇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 drop-down list selection

非常感謝。

來源

2013-09-27 user2822920

在你的'removeClass（）'和'addClass（）'線，是' DropdownList'而不是'＃DropDownList'或'.DropDownList'錯別字？ – kristinalim

在你的CSS中，「selected」類不可用。 –

試試下面的jQuery

而不是

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

變化

$(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

來源

2013-09-27 10:32:23

令人驚歎！謝謝！ – user2822920

使用javascript選擇jQuery CSS類型下拉列表

回答

相關問題