Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <label>Items: </label> <input type="text" value="January:JAN, February:FEB, March:MAR"/>
  <br/>
  <label>Add: </label>
  <button id="select">Select</button>
  <button id="list">Unordered list</button>
  <button id="olist">Ordered select</button>
  <div id="menu">
    <h2>Menus:</h2>
  </div>
</body>
</html>
​
 
body { font: 15px Arial; }
input { 
  padding: .3em; 
  width: 350px;
  font-family: monospace;
}
button { padding: .3em 1em; margin: 0; }
label { display: inline-block; width: 50px; }
div { 
  border: 1px solid black;
  min-height: 300px;
  padding: .5em 1em;
  margin: 1em 0;
}
ul, ol {
  padding: 1em;
  list-style-position: inside;
}
ul { background: #bada55; }
ol { background: #ABB5ED; }
select { padding: .3em; min-width: 200px; }
 
function makeMenu(items, tags) {
  
  tags = tags || ['ul', 'li']; // default list tags
  var parent = tags[0];
  var child = tags[1];
  
  var item, value = '';
  for (var i = 0, l = items.length; i < l; i++) {
    item = items[i];
    // Separate item and value if value is present
    if (/:/.test(item)) {
      item = items[i].split(':')[0];
      value = items[i].split(':')[1];
    }
    items[i] = '<'+ child +' '+ 
      (value && 'value="'+value+'"') +'>'+ // add value if present
        item +'</'+ child +'>';
  }
  
  return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}
​
$('button').click(function(){
  var id = this.id;
  var menu = makeMenu(
    $('input').val().split(/,\s?/), 
    id === 'select' && ['select', 'option'] ||
    id === 'olist' && ['ol', 'li'] ||
    ['ul', 'li']
  );
  $('#menu').append(menu);
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers