如何将按钮变成下拉菜单？

Question

我希望能够单击图标并下拉两个选项以从中选择并将输入框中的占位符更改为用户选择的内容。a:focus {  outline: thin dotted #333;  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}a:hover,a:active {  outline: 0;}button,input {  margin: 0;  font-size: 100%;  vertical-align: middle;}button,input {  *overflow: visible;  line-height: normal;}button::-moz-focus-inner,input::-moz-focus-inner {  padding: 0;  border: 0;}button {  -webkit-appearance: button;  cursor: pointer;}button {  cursor: pointer;}@media print {  * {    text-shadow: none!important;    color: #000!important;    background: transparent!important;    box-shadow: none!important;  }  a,  a:visited {    text-decoration: underline;  }  a[href]:after {    content: " (" attr(href) ")";  }  a[href^="javascript:"]:after {    content: "";  }}a {  color: #188252;  text-decoration: none;}a:hover,a:focus {  color: #188252;  text-decoration: underline;}form {  margin: 0 0 18px;}input,button {  font-size: 13px;  font-weight: normal;  line-height: 18px;}input,button {  font-family: 'Roboto', Arial, sans-serif;}input[type="text"] {  display: inline-block;  height: 18px;  padding: 4px 6px;  margin-bottom: 9px;  font-size: 13px;  line-height: 18px;  color: #555;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  vertical-align: middle;}input {  width: 206px;}input[type="text"] {  background-color: #fff;  border: 1px solid #ccc;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  -webkit-transition: border linear .2s, box-shadow linear .2s;  -moz-transition: border linear .2s, box-shadow linear .2s;  -o-transition: border linear .2s, box-shadow linear .2s;  transition: border linear .2s, box-shadow linear .2s;}

Answer 1

您可以检查单击的元素（当下拉列表打开时）是否是a标记元素之一（来自下拉列表），然后更新 searchinput的占位符。

因此myFunction自暴自弃，千万不要忘了送event的onclick属性中HTML，像这样onclick="myFunction(event)"：

function myFunction(e) {

  console.log('click');

  document.getElementById("myDropdown").classList.toggle("show");

  /** if that's an "a" tag that was clicked use its text as the placeholder **/

  e.target.tagName.toUpperCase() === 'A' && document.getElementById('searchterm').setAttribute('placeholder', e.target.textContent);

}

对不起，我无法制作可运行的代码段，因为代码（来自 jsfiddle 链接）很乱，但我做了一支笔来查看最终结果。