select标签在点击后且下拉列表还未打开之前就触发的事件 —— mousedown

因工作需求，需要在一个只显示10个选项的下拉列表中添加一个“更多”选项，当用户点击更多选项时弹出一个选择框，用户可以在选择框中选择下拉列表中没有的选项；我是当用户选中一个弹出页中的选项时就创建一个option并选中它，然后添加到select标签上，但让用户看到的下拉列表中的选项只能是10个（不包括“更多”这个选项），这里创建了新的选项就会变多，所以要在用户下次点击select时把后来创建的选项都删掉，只保留原来的10个，这里就需要一个能在点击select后，下拉列表框未打开之前就触发的事件，一开始我用onclick事件来做，打开下拉列表后还是会显示多创建的选项，但是关闭后再次打开就没了，想来应该是onclick事件是在下拉列表框打开之后触发或者关闭之后触发的，所以导致创建新选项后第一次打开下拉列表还能看到新创建的选项，后来改用mousedown事件就可以能在创建新option后第一次打开下拉列表框中没有新创建的选项了。

下面是一个使用小案例

code

//下拉框代码
<select id="thesaurus" style="width: 95%" name="thesaurus" disabled="true">
      <option >中国</option>
      <option >美国</option>
      <option >朝鲜</option>
      <option >韩国</option>
      <option >日本</option>
      <option >越南</option>
      <option >英国</option>
      <option >法国</option>
</select>


//js代码

$("#thesaurus").mousedown(function(){
   //在打开下拉列表之前就把日本选项给删除了，所以打开的下拉列表中不会有日本选项
   //这里不能用click事件，因为click事件是在鼠标抬起之后触发的，这时下拉列表已经加载完成了，再执行
   //删除日本选项的操作就不会删除掉在下拉列表中已经显示出来的日本选项，不过下次再打开时就会删除了
   var options = $("#thesaurus option");
   options[4].remove();
});