修改jQuery脚本，让我选择页面入口的选择列表的默认值

Modification to jQuery script to let me choose which is the default value of the select list on page entrance

本文关键字：选择 入口 jQuery 列表 默认值 修改 脚本      更新时间：2023-12-07

我使用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>
相关文章：