Jquery Mobile - 添加动态选择选项

Question

我有一个带有 select 元素的 JQM 页面:

<select class="state" name="user.state" data-role="select"><option value="">state</option></select>

我正在尝试动态添加选项:

$.each(data['states'], function(index, state) {
    $('<option value="'+state+'">'+state+'</option>').appendTo($('#update-profile-page .state'));
});

但它没有按预期工作。

屏幕截图:

问题在于默认或选定选项的值包含所有状态。

Answer 1

我的 HTML 代码:

<div data-role="page">
    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <p>Hello world</p>      
        <select class="state" name="user.state" data-role="select">
            <option value="asfsafd">option1</option>
            <option value="asfsafd">option2</option>
            <option value="asfsafd">option3</option>
        </select>
    </div><!-- /content -->
    <a data-role="button" id="test">click</a>   
</div><!-- /page -->

JS代码

<script>
    $("#test").bind('click', function(){
        var select = $('select.state');
        $.each(["option4", "option5", "option6" , "option7"], function(index, state) {              
            var optTempl = '<option value="' +state+ '">'+state+'</option>';            
            select.append(optTempl)
        });
        var option4 = $($("option", select).get(4));
        option4.attr('selected', 'selected');
        select.selectmenu();
        select.selectmenu('refresh', true);
    })
</script>

我对您的代码进行了一些修改以进行解释。我添加了一个按钮，并附加了一个点击按钮。当您单击“我动态附加一些随机值”时，将所选选项更改为动态添加的选项之一。然后重新初始化选择菜单，然后刷新菜单。

脚本的最后两行就是答案。