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

使用HTML select菜单，我试图创建一个HTML元素，而不是纯文本的下拉列表，但每个元素isn't displaying properly inside the dropdown menu：是否可以在下拉列表中包含HTML元素？

<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元素的下拉小部件？

来源

2013-05-10 Anderson Green

你需要选择做'select'定制做 – 2013-05-10 20:52:15

使用li/ul标签和css – Sebas 2013-05-10 20:52:26

@Sebas我不确定那会怎样。你能详细解释一下吗？ – 2013-05-10 20:55:59

下面是如何通过构建您自己的下拉处理程序来实现它的示例。

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

来源

2013-05-11 00:55:36 Xotic750

这很有效，虽然它在元素嵌套时不起作用：http://jsfiddle.net/zUdja/75/我希望可以以某种方式解决此问题。 – 2013-05-11 01:16:13

我并没有将它与嵌套编写在一起，它纯粹是HTML选择/选项元素的等价物的例子，但是具有将标记作为值的能力。我确信有一些工作可以扩展并转化为某种菜单部件，但是我确定有更好的菜单部件（没有什么能阻止你按照你的意愿去做） – Xotic750 2013-05-11 01:25:15