hijiangtao · March 12, 2017 14:27 · hijiangtao · Mar 12, 2017
diff --git a/menu.html b/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>
No results found