将 opt 组属性动态设置为 Select

发布于 2024-11-15 11:50:22 字数 262 浏览 3 评论 0原文

我通过以下方式向选择菜单添加新选项:

var options1 = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(options1, function(val, text) {
    $('#SelectMenu').append( new Option(text,val) );
});

How can we add a opt group to the select menu?

I am adding new options to a select menu by the following way:

var options1 = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(options1, function(val, text) {
    $('#SelectMenu').append( new Option(text,val) );
});

How can we add a opt group to the select menu?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

避讳 2024-11-22 11:50:22

工作示例: http://jsfiddle.net/rULKH/28/

JS

var groups = {
    1 : 'USPS',
    2 : 'FedEx'
};

var optionsGroup1 = {
    standard  : 'Standard: 7 day',
    rush      : 'Rush: 3 days',
    express   : 'Express: next day',
    overnight : 'Overnight'
}

var optionsGroup2 = {
    firstOvernight : 'First Overnight',
    expressSaver   : 'Express Saver',
    ground         : 'Ground'
}

$.each(groups, function(groupIndex, groupText) { 
    $('#shipping-options').append('<optgroup label="'+groupText+'" id="'+groupText+'" />');

    $.each(eval('optionsGroup' + groupIndex), function (optionText, optionIndex) {
        $('#'+groupText).append(new Option(optionIndex,optionText));
    });
});

$('#shipping-options').selectmenu("refresh");
$('#option-page').page();

HTML

<div data-role="page" data-theme="b" id="option-page"> 
    <div data-role="content"> 

       <div data-role="fieldcontain"> 
            <label for="shipping-options" class="select">Choose shipping method:</label> 
            <select name="shipping-options" id="shipping-options" data-native-menu="false"> 

            </select> 
        </div> 

    </div>
</div>

Working Example: http://jsfiddle.net/rULKH/28/

JS

var groups = {
    1 : 'USPS',
    2 : 'FedEx'
};

var optionsGroup1 = {
    standard  : 'Standard: 7 day',
    rush      : 'Rush: 3 days',
    express   : 'Express: next day',
    overnight : 'Overnight'
}

var optionsGroup2 = {
    firstOvernight : 'First Overnight',
    expressSaver   : 'Express Saver',
    ground         : 'Ground'
}

$.each(groups, function(groupIndex, groupText) { 
    $('#shipping-options').append('<optgroup label="'+groupText+'" id="'+groupText+'" />');

    $.each(eval('optionsGroup' + groupIndex), function (optionText, optionIndex) {
        $('#'+groupText).append(new Option(optionIndex,optionText));
    });
});

$('#shipping-options').selectmenu("refresh");
$('#option-page').page();

HTML

<div data-role="page" data-theme="b" id="option-page"> 
    <div data-role="content"> 

       <div data-role="fieldcontain"> 
            <label for="shipping-options" class="select">Choose shipping method:</label> 
            <select name="shipping-options" id="shipping-options" data-native-menu="false"> 

            </select> 
        </div> 

    </div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文