Javascript 如何在下拉列表的末尾保留特定选项？

我想显示一个城市列表给用户选择，用户也应该能够选择“其他”选项添加一个新的城市。一旦他们选择“其他”，就会显示一个新的文本框来获取新选项的值

问题是“其他”选项应该始终是列表中的最后一个选项，但列表的顺序基于id号。即使我将其作为城市表中的最后一项，因为用户可以添加新城市，所有新城市都会在列表中的“其他”之后

<s:select list="Cities"
             name="cities.id"
             label="Cities"
   />  

但是，它应该像下面这样显示给用户（已订购，而其他仍然是最后一个选项）

如果选择了other并且键入了Tokyo，则应更新列表（已排序，添加Tokyo，而other仍然是最后一个选项）

---

有几种解决方案：

通过JS动态添加选项

通过将该选项附加到

城市

不要使用

标记，只需为普通HTML选择构建选项

我可能会选择选项二，在呈现JSP之前简单地将该选项添加到列表中

这是否是最好的方法取决于应用程序的其他方面

---

---

不相关，但按ID排序似乎非常违反直觉。

尝试仅从DB获取城市，并硬编码

其他

选项

 Paris
 Los Angeles 
 Other

 Los Angeles
 Paris
 Other

    Los Angeles
    Paris
    Tokyo
    Other