title: javascript html select add optgroup and option dynamically
body: <p>let say i have a <code>&lt;select id="chat" size="9" /&gt;</code> , i want to add some optgroup and option which will be like this</p>
  
  <p><a href="http://jsfiddle.net/ZP4E9/" rel="noreferrer">http://jsfiddle.net/ZP4E9/</a></p>
  
  <p>with object like this </p>
  
  <pre><code>{friendchat:[{name:"somefriend1",...},{name:"somefriend2",...},
  otherchat:[{name:"someother1",...},{name:"someother2",...},
  friendrequest:[{name:"somerequest1",...},{name:"somerequest2",...},
  sentrequest:[{name:"somesent1",...},{name:"somesent2",...}]
  </code></pre>
  
  <p>edit: typed input instead of select...</p>