是否可以使用本机JavaScript或jQuery制作可编辑的下拉菜单？

Question

我在HTML中有一个<select>元素。我希望用户能够向该元素添加选项。

我认为它的工作方式如下：

    <select>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
     <option onclick='addNew()'>Click to add new option</option>
    </select>

列表上的最后一个选项显示“单击以添加选项”。只要单击此按钮，函数就会将<select>元素转换为允许自由文本输入的内容。

用户体验示例：

功能示例：

function addNew() {
   //Step 1, change select to allow free text entry
   //Step 2, After text entry, change select back to regular select element and append the new option to the list
}//end addNew

我的问题：

如您在上面的代码中看到的那样，卡住的部分是addNew函数。我已经在互联网上进行搜索，但是似乎找不到“更改”选择元素以允许自由输入文本，然后将文本值附加到选择元素的方法。

使用原生JavaScript或jQuery是否有可能？