Jquery Mobile 下拉格式问题
Posted
技术标签:
【中文标题】Jquery Mobile 下拉格式问题【英文标题】：Jquery Mobile Dropdown Formatting Issue 【发布时间】：2018-10-12 01:47:09 【问题描述】：不太清楚为什么这不起作用。每次我单击选择菜单时，它都会填满整个屏幕。我试图让这个下拉菜单像普通的下拉框一样执行：只需显示带有滚动条的选项。我想我会继续打字，因为堆栈溢出坚持要我在帖子中添加更多细节，这主要是代码。说实话，我很生气，我什至必须在这里打字。如果默认选择菜单可以正常工作，那就太好了。
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css' />
<script src='http://code.jquery.com/jquery-1.4.3.min.js'></script>
<script src='http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js'></script>
</head>
<body>
<div data-role='page' style='width:300px'>
<select name='minutesTo' id='minutesTo' data-theme='a' required>
<option value='00'> 00 </option>
<option value='01'> 01 </option>
<option value='02'> 02 </option>
<option value='03'> 03 </option>
<option value='04'> 04 </option>
<option value='05'> 05 </option>
<option value='06'> 06 </option>
<option value='07'> 07 </option>
<option value='08'> 08 </option>
<option value='09'> 09 </option>
<option value='10'> 10 </option>
<option value='11'> 11 </option>
<option value='12'> 12 </option>
<option value='13'> 13 </option>
<option value='14'> 14 </option>
<option value='15'> 15 </option>
<option value='16'> 16 </option>
<option value='17'> 17 </option>
<option value='18'> 18 </option>
<option value='19'> 19 </option>
<option value='20'> 20 </option>
<option value='21'> 21 </option>
<option value='22'> 22 </option>
<option value='23'> 23 </option>
<option value='24'> 24 </option>
<option value='25'> 25 </option>
<option value='26'> 26 </option>
<option value='27'> 27 </option>
<option value='28'> 28 </option>
<option value='29'> 29 </option>
<option value='30'> 30 </option>
<option value='31'> 31 </option>
<option value='32'> 32 </option>
<option value='33'> 33 </option>
<option value='34'> 34 </option>
<option value='35'> 35 </option>
<option value='36'> 36 </option>
<option value='37'> 37 </option>
<option value='38'> 38 </option>
<option value='39'> 39 </option>
<option value='40'> 40 </option>
<option value='41'> 41 </option>
<option value='42'> 42 </option>
<option value='43'> 43 </option>
<option value='44'> 44 </option>
<option value='45'> 45 </option>
<option value='46'> 46 </option>
<option value='47'> 47 </option>
<option value='48'> 48 </option>
<option value='49'> 49 </option>
<option value='50'> 50 </option>
<option value='51'> 51 </option>
<option value='52'> 52 </option>
<option value='53'> 53 </option>
<option value='54'> 54 </option>
<option value='55'> 55 </option>
<option value='56'> 56 </option>
<option value='57'> 57 </option>
<option value='58'> 58 </option>
<option value='59'> 59 </option>
</select>
</div>
</body>
</html>
【问题讨论】：
这对我不起作用。我也尝试使用 ui-field-contain 作为它的类，但也没有用。 我相信 jquery.mobile-1.0a1 意味着您使用的是 jQuery Mobile Alpha 1 版本，该版本于 2010 年 10 月发布...如果您切换到更新的版本，您会轻松很多，如果可以的话。 【参考方案1】：您已将宽度添加到以下内容
<div data-role='page' style='width:300px'>// this will give width to only the select element
但是当你检查你的下拉菜单时，它是在你的 div 结束后创建的。为下拉列表创建了一个单独的 div，其宽度在绝对位置上为 100%，所以现在我觉得你应该为下拉列表添加静态宽度。
https://codepen.io/aayushi_kambariya/pen/vjmJpx
.ui-page
width: 300px;
【讨论】：
这可行，但也可以将页面保持在 300 像素。我之所以拥有它，是因为我将这段代码从我的其他页面中提取出来。有没有办法在不改变页面宽度的情况下改变单独 div 的宽度？以上是关于Jquery Mobile 下拉格式问题的主要内容，如果未能解决你的问题，请参考以下文章
jquery mobile系列问题汇总整理（传播知识，利己利人）