【问题标题】:(JS/JQuery) Changing default value/placeholder of custom dropdown?(JS/JQuery) 更改自定义下拉菜单的默认值/占位符?
【发布时间】:2017-04-19 08:56:27
【问题描述】:

所以,这里是不使用选择标签的自定义下拉列表的 HTML。下拉列表的占位符/默认值是“Acura”,它是列表 (ul) 中的第一个元素。我正在尝试查看是否可以更改下拉列表的占位符/默认值(例如,宝马)而不更改下拉列表的顺序(品牌按字母顺序排列)。

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

这是创建下拉列表的 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(),
            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)
    }
})

【问题讨论】:

    标签: javascript jquery html html-lists dropdown


    【解决方案1】:

    你必须改变

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

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

    这样就可以了

    【讨论】:

    • 我知道,但是 HTML 是从 JavaScript 渲染的,所以为了反映在 HTML 上的更改,必须修改 JavaScript
    • 然后你可以在文档上编写一个函数,默认为宝马
    猜你喜欢
    • 2020-06-26
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 1970-01-01
    • 2021-06-02
    • 2023-04-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多