hijiangtao/menu.html

## menu.html
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>body</title>
  <style>
	  #select {
	  	/*border: 1px solid #000;*/
	  	width: 100px;
	  	/*margin: 1px;*/
	  }
	  #select>input {
	  	border: 1px solid #000;
	  	width: 100%;
	  	height:100%;
	  	margin: -1px;
	  	-webkit-appearance: none;

	  }

	  #dropdown {
	  	/*border: 1px solid #000;*/
	  	width: 100px;
	  	/*height: 60px;*/
	  }

	  .submenu {
	  	width: 100%;
	  	height: 20px;
	  	border-style: solid;
	  	border-color: #000;
	  	border-top-width: 0.5px;
	  	border-bottom-width: 0.5px;
	  	border-left-width: 1px;
	  	border-right-width: 1px;
	  	font-size: .8rem;
	  	margin: -0.5px -1px -0.5px -1px;
	  }
	  div.submenu:first-child {
	  	border-top-width: 1px;
	  	margin-top: -1px;
	  }
	  div.submenu:last-child {
	  	border-bottom-width: 1px;
	  	margin-bottom: -1px;
	  }

	  .visible {
	  	display: block;
	  }
	  .hide {
	  	display: none;
	  }
  </style>
</head>
<body>
  <div id="select"></div>

  <script>
	function select(options){
	  let idstr = options.srcNode.substring(1),
	  	  id = document.getElementById(idstr),
	  	  objs = options.data,
	  	  dropdown = document.createElement('div'),
	  	  input = document.createElement('input'),
	  	  body = document.getElementsByTagName('body')[0];

	  dropdown.setAttribute('id', 'dropdown');
	  dropdown.classList.add("hide");
	  input.setAttribute('id', 'selinput');
	  input.addEventListener('click', menuClick);

	  // Iterate data to generate submenu elements
	  for (let i = 0; i < objs.length; i++) {
	  	let div = document.createElement('div');

	  	div.innerHTML = objs[i];
	  	div.setAttribute('class', 'submenu');
	  	div.addEventListener('click', submenuClick);

	  	dropdown.appendChild(div);
	  }

	  id.appendChild(input);
	  body.appendChild(dropdown);
	  document.addEventListener('click', bodyClick);

	  // submenu click event
	  function submenuClick(element) {
	  	let submenu = document.getElementById('dropdown'),
	  		selinput = document.getElementById('selinput');

	  	submenu.classList.add('hide');
	  	selinput.value = element.target.innerHTML;
	  }

	  // menu(input) click event
	  function menuClick(element) {
	  	let menu = document.getElementById('dropdown');
	  	menu.classList.remove('hide');
	  }

	  // hide submenu when click on other parts of the page
	  function bodyClick(element) {
	  	if (element.target.nodeName !== 'INPUT') {
	  		let submenu = document.getElementById('dropdown');
	  		submenu.classList.add('hide');
	  	}
	  }
	}

	// eg
	select({
	  srcNode: '#select',
	  data: ['北京','上海','杭州'],
	  onChange: (ev)=>{
	    console.log(ev.value);
	  }
	})
  </script>
</body>
</html>