javascript - href 单击触发选择选项的下拉列表

Question

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

用户像在手机上一样进行选择，点击后它会恢复到看起来像按钮的原始“a href”。但是，“select option”不应该是可见的，只有在打开的下拉列表表单中单击“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> 

J查询:

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

当您点击“a href”时，它会打开“选择选项”下拉菜单，看起来就像您在图片上看到的一样。单击任何选项后，它会像往常一样返回到“a href”。我的 Jquery 技能相对较弱，我想请您帮忙如何实现。因为它是“href”，所以我使用了“e.preventDefault();”但我不知道如何继续。

Answer 1

您可以试试这个:在单击 anchor 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>