（JS / JQuery）更改自定义下拉菜单的默认值/占位符？ [英] (JS/JQuery) Changing default value/placeholder of custom dropdown?

问题描述

所以，这里是不使用选择标签的自定义下拉菜单的HTML。下拉列表的占位符/默认值是Acura，它是列表中的第一个元素（ul）。我正在尝试查看是否可以在不更改下拉列表顺序（制作按字母顺序排列）的情况下更改下拉列表的占位符/默认值（例如，说宝马）。

 < span id =builder-make-selectionclass =pick> 
< span class =label>制作：< / span> 
< div class =custom-dd-wrapper builder-makestabIndex =1> 
< div class =custom_dd_select> 
< span> 
< a>讴歌< / a>< / span> 
< / div> 
< div class =custom_dd_options> 
< ul class =custom_dropdown> 
< li data-make =Acura> Acura< / li> 
< li data-make =阿尔法罗密欧>阿尔法罗密欧< / li> 
< li data-make =Audi>奥迪< / li> 
< li data-make =宝马>宝马< / li> 
< / ul> 
< / div> 
  

这里是创建下拉列表的javascript：

 （function（h，a）{
 function k（）{
 var b = a（this）.parents（div.custom_dd_wrapper），
f = b.attr（id），
e = a（b）.find（。custom_dd_select a） ，
l = a（this）.data（），
d = e.text（）。trim（），$ b $ = a（this）.text（）。trim（）; 
makes-options== f&&（a（b）.addClass（active），e.parent（span）。attr（style，a（this）.attr（风格）））; 
 e.text（g）; 
 for（var m in l）{
 if（m =='make'）{
 e.parent （span）。data（m，l [m]）; 
} 
} 
d！= g&& a（this）.closest（。custom_dd_wrapper）。 trigger（change）
} 
 
函数g（）{
 var b = a（this）.closest（。custom_dd_wrapper）; 
a（b ）.find（ UL）。隐藏（）; 
 a（b）.find（。custom_dd_select）。removeClass（click）; 
 a（b）.find（。custom_dd_options）。removeClass（show）
} 
 h.CustomDropdownView = function（）{
 var b = this; 
 this.vc =！1; 
 a（。cs）。on（click，.trans-disabled，function（a）{
 a.stopPagagation（）
}）; $（。cs）。on（click，.custom_dd_wrapper，.popup .custom_dd_wrapper，function（）{
 b.vc =！0; 
 var f = a （this）.closest（。custom_dd_wrapper）; 
a（f）.find（ul）。toggle（）; 
a（f）.find（。custom_dd_select）。toggleClass（点击）; 
a（f）.find（。custom_dd_options）。toggleClass（show）
}）; （.cs）。on（click，.custom_dd_options .custom_dropdown> li：not（.trans-disabled），
 k）; 
 a 
 if（0> window.navigator.userAgent.indexOf（MSIE）&& null == navigator.userAgent.match（/Trident.*rv\:11\./））a （.cs）。on（blur，.custom_dd_wrapper，.popup .custom_dd_wrapper，function（）{
a（this）.find（。custom_dd_options ul）。is（：visible ）&& g.call（this）
}）; $（b.vc）b.vc =！1; 
 else {
 var f = a（。custom_dropdown）。filter（：visible）; 
 0< f.length&& f.each（g）; 
} 
} ）; 
a（。cs）。on（click，.disable，g）
} 
}）
  

解决方案

您必须更改

 < div class =custom_dd_select> 
< span> 
< a>讴歌< / a>< / span> 
< / div> 
  

至

 < div class =custom_dd_select> 
< span> 
< a>宝马< / a>< / span> 
< / div> 
  

这将起作用

So, here's the HTML for a custom dropdown that doesn't use a select tag. The placeholder/default value for the dropdown is "Acura", which is the first element in the list (ul). I'm trying to see if I can change the placeholder/default value for the dropdown (to say, BMW for example) without changing the order of the list of the dropdown (the makes are in alphabetical order).

 <span id="builder-make-selection" class="pick">
  <span class="label">Make:</span>
 <div class="custom-dd-wrapper builder-makes" tabIndex="1">
<div class="custom_dd_select">
    <span>
  <a>Acura</a></span>
</div>
<div class="custom_dd_options">
    <ul class="custom_dropdown">
        <li data-make="Acura">Acura</li>
        <li data-make="Alfa Romeo">Alfa Romeo</li>
        <li data-make="Audi">Audi</li>
        <li data-make="BMW">BMW</li>
    </ul>
</div>

Here's the javascript that's creating the dropdown:

 (function(h, a) {
    function k() {
        var b = a(this).parents("div.custom_dd_wrapper"),
            f = b.attr("id"),
            e = a(b).find(".custom_dd_select a"),
            l = a(this).data(),
            d = e.text().trim(),
            g = a(this).text().trim();
        "makes-options" == f && (a(b).addClass("active"), e.parent("span").attr("style", a(this).attr("style")));
        e.text(g);
        for (var m in l) {
            if(m=='make'){
                 e.parent("span").data(m,l[m]);
            }                
        }
        d != g && a(this).closest(".custom_dd_wrapper").trigger("change")
    }

    function g() {
        var b = a(this).closest(".custom_dd_wrapper");
        a(b).find("ul").hide();
        a(b).find(".custom_dd_select").removeClass("click");
        a(b).find(".custom_dd_options").removeClass("show")
    }
    h.CustomDropdownView = function() {
        var b = this;
        this.vc = !1;
        a(".cs").on("click", ".trans-disabled", function(a) {
            a.stopPropagation()
        });
        a(".cs").on("click", ".custom_dd_wrapper, .popup .custom_dd_wrapper", function() {
            b.vc = !0;
            var f = a(this).closest(".custom_dd_wrapper");
            a(f).find("ul").toggle();
            a(f).find(".custom_dd_select").toggleClass("click");
            a(f).find(".custom_dd_options").toggleClass("show")
        });
        a(".cs").on("click", ".custom_dd_options .custom_dropdown > li:not(.trans-disabled)",
            k);
        if (0 > window.navigator.userAgent.indexOf("MSIE ") && null == navigator.userAgent.match(/Trident.*rv\:11\./)) a(".cs").on("blur", ".custom_dd_wrapper, .popup .custom_dd_wrapper", function() {
            a(this).find(".custom_dd_options ul").is(":visible") && g.call(this)
        });
        else a(".cs").on("click", function() {
            if (b.vc) b.vc = !1;
            else {
                var f = a(".custom_dropdown").filter(":visible");
                0 < f.length && f.each(g);
            }
        });
        a(".cs").on("click", ".disable", g)
    }
})

解决方案

You have to change

<div class="custom_dd_select">
    <span>
  <a>Acura</a></span>
</div>

to

<div class="custom_dd_select">
        <span>
      <a>BMW</a></span>
</div>

That will work

这篇关于（JS / JQuery）更改自定义下拉菜单的默认值/占位符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！