在单击特定选项时附加更多要选择的项目

Question

我的html页面（bootstrap，jquery，js）上的选择菜单有问题。根据我的要求，选择菜单（见下图）应该在第一时间只显示1,2,3和其他人，如果用户选择"others"，子菜单应出现在同一个选择菜单上，允许用户可以选择4和5选项而不隐藏旧菜单。

我尝试使用一些Jquery代码（当用户点击其他选项时附加4和5选项），问题是当我选择 select时，其他选择。

<select name="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="others">Others</option>
</select>

$(function(){
    $('select[name=mySelect]').on('change', function(){
        var selected = $(this).val();
        if(selected && selected == 'others'){
            $(this).children().last().remove();
            $(this).append('<option value="4">4</option><option value="5">5</option>');
            $(this).click();
        }
    });
});

当用户点击closing选项时，如何禁用选择"Other"

Answer 1

这样的例子。
HTML：

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="Others">Others</option>
</select>

JQuery的：

$("select").change(function() {
  if($(this).val() == "Others") {
     $(this).append("<option value='5'>5</option>").find("option:selected").text("4").val("4");
  }
}); 

https://codepen.io/anon/pen/opMwvp

要禁用关闭选择see this answer