href单击会触发选择选项的下拉菜单

Question

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

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

HTML：

<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> 

jQuery：

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

当您单击“ a href”时，它会打开“选择选项”下拉菜单，看起来就像在图片上看到的一样。在单击任何选项后，它会照常返回“ a href”。 我的Jquery技能相对较弱，我正在询问您的帮助该如何实现。由于它是“ a href”，因此我使用了“ e.preventDefault（）;”。但我不知道如何继续。

Answer 1

您可以尝试以下操作：在锚定href的单击上显示选择框，在选择框的更改事件上将其隐藏。参见下面的代码

$(document).ready(function(){

$('.button-select').on('click',function (e) {
    e.preventDefault();
    $('#button-dropdown').show();
});
 $('#button-dropdown').on('change', function(){
   $(this).hide();
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<a href="#" class="button-select"><i class="icon">Icon</i> Button</a>
<select id="button-dropdown" style="display:none">
    <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>