Javascript A href单击触发器选择选项'；s下降

这是一个打算在手机上使用的项目，因此没有必要考虑它在桌面屏幕上的表现。在我的项目中，我有一个“a href”，旁边有一个看起来像按钮的图标。当用户单击它时，它会打开“选择选项”下拉菜单。在手机上，默认情况下，它看起来像Android上的单选按钮或iPhone上的picker。下面是Android上选择选项的示例图像

用户会像在手机上一样进行选择，单击后会恢复为原来的“a href”，看起来像一个按钮。但是，“选择选项”不应可见，仅在打开的下拉列表表单中单击“a href”后显示

HTML:

当您单击“a href”时，会打开“选择选项”下拉菜单，看起来就像您在图片上看到的一样。单击任何选项后，它会像往常一样返回到“a href”。

---

我的Jquery技能相对较弱，我请求您帮助我如何实现这一点。因为它是“a href”，所以我使用了“e.preventDefault（）；”，但我不知道如何继续。

您可以尝试这样做：在单击锚href时显示选择框，在选择框的更改事件时隐藏它。请参阅下面的代码

$（文档）.ready（函数（）{
$（'.button select'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（“#按钮下拉列表”）.show（）；
});
$（“#按钮下拉列表”）。在（'change'，function（）上{
$（this.hide（）；
});
});

选择1
选择2
选择3
选择4

<a href="#" class="button-select"><i class="icon">Icon</i> Button</a>
<select id="button-dropdown">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
</select> 

$('.button-select').trigger(function (e) {
    e.preventDefault();
});