我使用Mobiscroll jQuery脚本为用户提供更漂亮的输入。在页面加载时,选择列表的第一个选项显示为已选择。我应该在现有的代码中添加什么,在页面入口,(例如)第三个值显示为默认值?
我试过selecte="selected"
,但它不起作用。
这是jQuery脚本
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
这是选择框的选项
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>
您可以通过以下操作轻松地从jQuery设置值:
var defaultValue = 3;
$("#city").val(defaultValue);
这里的"3"代表你下拉列表中的波士顿,这里有一个小提琴作为证据:
http://jsfiddle.net/6mj8n/5/
使用$('#city').val('3');
会将第三个选项"Boston"设置为选中状态,例如
在这种情况下,我认为我会使用香草DOM方法:
$('#city')[0].options.selectedIndex = 3;
应该提到的是,这个和其他解决方案应该放在初始化mobisroll之前。使用mobiscroll进行演示:http://jsfiddle.net/DCaHK/1/
经过进一步思考,您在选项中添加selected
的第一个建议应该已经奏效。更新了我的演示以做到这一点。自动完成可能会阻止它在某些浏览器中正常工作,所以你的问题可能只是你需要关闭自动完成:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>