html - 停止菜单项在简单的 html 下拉菜单上出现两次

Question

这是一个非常简单的问题，我确信这是一个非常简单的修复。我根本没有真正使用过下拉菜单，所以不知道如何改变它。我想做的就是阻止显示的菜单项出现在下拉结果中!所以我的代码如下:

<form action="">
<select name="menu">
<option value="other">Other blog entries</option>
<option value="other">So you want to shoot a show...</option>
</select>
</form>

fiddle

工作正常，但当列表被删除时，我不想将“其他博客条目”显示为删除列表中的选项。如何更改此设置以仅显示其他博客条目而不显示拖放项目？我用谷歌搜索了一下，找不到解决方案!

非常感谢您的帮助。

Answer 1

解决方案如下:

<form action="">
  <select name="menu" value="" onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);">
   <option role="placeholder" value="" id="hiddenOption">Other blog entries</option>
   <option value="other">So you want to shoot a show...</option>
  </select>
</form>

和CSS:

#hiddenOption {display: none;}

fiddle :http://jsfiddle.net/DSsYU/1/

这是想要的结果吗？ :)