Javascript 我想将水平列表视图更改为移动设备中的“选择框”

我创建了一个简单的ul li列表，如下所示：

<ul>
    <li>All</li>
    <li>All</li>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

全部
全部
选择1
选择2
选择3

现在看起来是这样的：

我希望它像移动设备中的选择框一样

你好，朋友，
hello friend,

if you need your <ul> <li> structure as select box in mobile device,so you need to  code this structure twice.

1. as you already write.add class name to hide this in mobile
<ul class="list-desktop-wrap">
    <li>All</li>
    <li>All</li>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>



2.<div class="section-mobile-only">
<select>
  <option value="All" selected>All</option>
  <option value="All">All</option>
  <option value="Option1">Option 1</option>
  <option value="Option2">Option 2</option>
  <option value="Option3">Option 3</option>
</select>  
</div>
As make this section display none in desktop & and display block in mobile device. if you need to view select box after 768 resolution (i-pad) so make css as 
@media (max-width:768px){
.list-desktop-wrap{display:none};
 .section-mobile-only{display:block};
}

initally its 

.section-mobile-only{display:none};

如果您需要将
结构作为移动设备中的选择框，则需要对该结构进行两次编码。
1.正如您已经编写的那样。添加类名以在mobile中隐藏此内容

全部
全部
选择1
选择2
选择3

2.
全部的
全部的
选择1
选择2
选择3
如图所示，使此部分在桌面上显示无，并在移动设备上显示块。如果您需要查看768分辨率（i-pad）后的选择框，请将css设置为
@介质（最大宽度：768px）{
.list桌面换行{显示：无}；
.仅移动部分{显示：块}；
}
最初是
.仅移动部分{显示：无}；

欢迎使用堆栈溢出！请拿着，环顾四周，通读一遍，特别是努力解决问题。如果您在这样做时遇到了一个特定的问题，请在尝试时发布一个问题（使用jQuery的JavaScript代码），说明什么不起作用，并解释您迄今为止的研究。创建一个选择框并在开始时隐藏它。在移动宽度处打开并隐藏水平菜单