Javascript 使用多选选项进行选择，但要使用正确的下拉方式

我有一个简单的城市下拉列表，我想使用多个选择选项。 对于它，我使用了select标记的multiple属性，但通过使用它，下拉列表被转换为带有multiple select选项的长方体区域。 我想要的是，下拉列表的外观应保持原样，即单击“选择”下拉列表时应显示，在其中，我可以使用多个城市，并使用CTRL键，其值将在php脚本中使用。 我已经看过多个jquery脚本，但我想知道是否有一些简单的方法来代替使用任何jquery或其他东西。 有没有更简单的方法来执行此操作？

请尝试以下代码：

<select id="city" multiple="multiple" name="city[]">
    <option>hawaii</option>
    <option>michigan</option>
    <option>southfield</option>
</select>

---

HTML下拉列表就是这样做的，不允许多个选择，但是你可以使用一些jquery插件，比如，这样做比自己创建这样的插件要简单得多。

原则上，

select

中的

size=1

属性会告诉浏览器只显示一个选项，您可以使用脚本更改

size

属性的值以创建下拉效果。在实践中，它大多不起作用

更实用的方法是先设置

select

元素的高度，然后在鼠标上方和聚焦时更改高度。不幸的是，浏览器行为在调整元素大小方面并不一致，但结果可能是可以接受的。请注意，默认情况下，选项中的字体大小会减小，因此大小调整有点棘手。在本例中，我只需将字体大小设置为100%，以便可以以简单的方式使用

em

单元：

option { height: 1.3em; font-size: 100%; }
select { height: 1.3em; font-size: 100%;  }
select:hover, select:focus { height: 13em; }

---

结果在某些浏览器上有点太小，在某些浏览器上有点太大，IE没有显示任何箭头来表示它确实是一个下拉列表。

这就是我所做的，但使用它下拉列表不会保持下拉列表，而是转换到一个带有滚动条的框中，可以选择多个选项。我希望下拉式外观保持原样，有多个选项

option { height: 1.3em; font-size: 100%; }
select { height: 1.3em; font-size: 100%;  }
select:hover, select:focus { height: 13em; }