Question

使用HTML select菜单，我正在尝试使用HTML元素而不是纯文本创建下拉列表，但每个元素isn't displaying properly inside the dropdown menu：

<select>
  <option value="1">
    <input type = "button" value = "This button won't display properly." />
  </option>
  <option value="">
    <b>Bold text won't display properly either.</b>
  </option>
</select>

在下拉菜单中嵌入HTML元素是否有任何语法上有效的方法？如果使用<select>菜单无法执行此操作，那么如何创建允许嵌套HTML元素的下拉窗口小部件？

Answer 1

问： - 在下拉菜单中嵌入HTML元素有任何语法上有效的方法

没有。在这一点上，这在语义上是不可能的。这是无效的Html。你不能在选项中包含HTML标签。

允许的内容：包含最终转义字符的文字（如é）。

Reference

您可以自己查看一些插件或创建一个插件，它基本上会创建一个带有div或其他标签的下拉窗口小部件，而这些标签来自您提供的选择选项。

Answer 2

以下是如何通过构建自己的下拉处理程序来实现此目的的示例。

CSS

.select {
    width: 10em;
    height: 1em;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    z-index: 0;
}
.gradient1 {
    background-color: #ebebeb;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#999999));
    background-image: -webkit-linear-gradient(top, #ebebeb, #999999);
    background-image: -moz-linear-gradient(top, #ebebeb, #999999);
    background-image: -ms-linear-gradient(top, #ebebeb, #999999);
    background-image: -o-linear-gradient(top, #ebebeb, #999999);
}
.gradient2 {
    background-color: #999999;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#ebebeb));
    background-image: -webkit-linear-gradient(top, #999999, #ebebeb);
    background-image: -moz-linear-gradient(top, #999999, #ebebeb);
    background-image: -ms-linear-gradient(top, #999999, #ebebeb);
    background-image: -o-linear-gradient(top, #999999, #ebebeb);
}
.list {
    position: relative;
    margin-left: -1px;
    padding: 0% 0% 0% 1px;
    width: 100%;
    height: auto;
    box-shadow: 0px 5px 10px #888888;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    background-color: #ebebeb;
    display: none;
    margin-top: -4px;
    z-index: 2;
}
.option {
    display: block;
    list-style-type: none;
    text-align: left;
}
.option:hover {
    background-color: blue;
}
.arrowDown {
    position: relative;
    top: -50%;
    left: 90%;
    width: 0%;
    height: 0%;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #444;
}
.value {
    position: relative;
    top: -2px;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

HTML

<div>
    <div id="first" class="select">
        <div class="value"></div>
        <div class="arrowDown"></div>
        <ul class="list">
            <li class="option"><b>one</b></li>
            <li class="option"><strike>two</strike></li>
            <li class="option"><em>three</em></li>
        </ul>
    </div>
    <div id="second" class="select">
        <div class="value"></div>
        <div class="arrowDown"></div>
        <ul class="list">
            <li class="option"><b>four</b></li>
            <li class="option"><strike>five</strike></li>
            <li class="option"><em>six</em></li>
        </ul>
    </div>
    <div id="third" class="select">
        <div class="value"></div>
        <div class="arrowDown"></div>
        <ul class="list">
            <li class="option"><b>seven</b></li>
            <li class="option"><strike>eight</strike></li>
            <li class="option"><em>nine</em></li>
        </ul>
    </div>
    <button id="getValue1">Get Text value 1</button>
    <button id="getValue2">Get HTML value 2</button>
    <button id="getValue3">Get Text value 3</button>
</div>

的Javascript

(function (global) {
    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);

        var selects = document.getElementsByClassName("select");

        function getTextValue(selectId) {
            var select = document.getElementById(selectId),
                values,
                text = "";

            if (select) {
                values = select.getElementsByClassName("value");
                if (values && values.length) {
                    text = values[0].textContent;
                }
            }

            return text;
        }

        function getHTMLValue(selectId) {
            var select = document.getElementById(selectId),
                values,
                html = "";

            if (select) {
                values = select.getElementsByClassName("value");
                if (values && values.length) {
                    html = values[0].innerHTML;
                }
            }

            return html;
        }

        function hideAll(not) {
            Array.prototype.forEach.call(selects, function (select) {
                if (select !== not) {
                    Array.prototype.forEach.call(select.getElementsByClassName("list"), function (ul) {
                        ul.style.display = "none";
                    });

                    select.className = (select.className.replace(/gradient[12]/, "").trim() + " gradient1").trim();
                }
            });
        }

        document.addEventListener("click", hideAll, false);

        Array.prototype.forEach.call(selects, function (select) {
            select.className = (select.className.trim() + " gradient1").trim();

            var lists = select.getElementsByClassName("list"),
                options,
                values,
                value;

            if (lists && lists.length) {
                options = lists[0].getElementsByClassName("option");
                if (options && options.length) {
                    values = select.getElementsByClassName("value");
                    if (values && values.length) {
                        value = values[0];
                        value.innerHTML = options[0].innerHTML;

                        Array.prototype.forEach.call(options, function (option) {
                            option.addEventListener("click", function clickOption() {
                                value.innerHTML = this.innerHTML;
                            }, false);
                        });
                    }
                }
            }

            select.addEventListener("click", function clickSelect(evt) {
                evt.stopPropagation();
                hideAll(this)

                var lists = this.getElementsByClassName("list"),
                    list;

                if (lists && lists.length) {
                    list = lists[0];

                    if (global.getComputedStyle(list).display === "none") {
                        list.style.display = "block";
                    } else {
                        list.style.display = "none";
                    }
                }

                if (this.className.indexOf("gradient1") !== -1) {
                    this.className = this.className.replace("gradient1", "gradient2");
                } else {
                    this.className = (this.className.replace(/gradient\d/, "").trim() + " gradient1").trim();
                }
            }, false);
        });

        document.getElementById("getValue1").addEventListener("click", function () {
            console.log(getTextValue("first"));
        }, false);

        document.getElementById("getValue2").addEventListener("click", function () {
            console.log(getHTMLValue("second"));
        }, false);

        document.getElementById("getValue3").addEventListener("click", function () {
            console.log(getTextValue("third"));
        }, false);
    }, false);
}(window));

在jsfiddle

上

Answer 3

不，你不能。如果您愿意，可以使用CSS创建您想要的内容。但这并不容易。

Answer 4

要在下拉列表中包含一个选项，请使用HTML中的标签。 HTML标记在表单中用于定义下拉列表中的选项。

您可以尝试运行以下代码以在HTML中实现元素-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML option Tag</title>
   </head>
   <body>
      <form action = "/cgi-bin/dropdown.cgi" method = "post">
         <select name = "dropdown">
            <option value = "HTML" selected>HTML</option>
            <option value = "Aaron">Aaron</option>
         </select>
         <input type = "submit" value = "Submit" />
      </form>
   </body>
</html>

是否可以在下拉列表中包含HTML元素？

4 个答案: