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>

我稍微修改了你的代码以便解释.我添加了一个按钮,然后点击它.当您单击i动态附加一些随机值时,将所选选项更改为动态添加的选项之一.然后重新初始化选择菜单,然后刷新菜单.

脚本的最后两行是答案.