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

Question

Using a HTML select menu, I'm trying to create a dropdown list with HTML elements instead of plain text, but each element 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>

Is there any syntactically valid method for embedding HTML elements inside a dropdown menu? If it isn't possible to do this using a <select> menu, then how can I create a dropdown widget that would allow nesting of HTML elements?

Answer 1

Q:-Is there any syntactically valid method for embedding HTML elements inside a dropdown menu

No. This is not possible any way semantically at this point. This is Invalid Html. You cannot have HTML tags inside option.

Permitted content: Text with eventually escaped characters (like é).

Reference

You can take a look at some of the plugins or create a plugin yourself which will basically create a dropdown-widget with div's or some other tags out of the select option you provide.

Answer 2

Here is an example of how you could do it by building your own drop down handler.

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

On jsfiddle

Answer 3

No you can not. If you want you can use CSS to create what you want. But it is not easy.

Answer 4

To include an option in a drop-down list, use the tag in HTML. The HTML tag is used within a form for defining options in the drop-down list.

You can try to run the following code to implement element in 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>