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动态附加一些随机值时，将所选选项更改为动态添加的选项之一。然后重新初始化选择菜单，然后刷新菜单。

脚本的最后两行是答案。

Answer 2

我希望这个功能有所帮助。

setSelect("typeBusiness",row["region"]);

function setSelect(idControl,newValue){
    var select = $("#"+idControl);
    var optsLength = $("#"+idControl+" > option").length;
    var optTempl = "<option value='"+newValue+"'>"+newValue+"</option>";            
    select.append(optTempl);    
    var newOption= $($("option", select).get(optsLength));
    newOption.attr("selected", "selected");
    select.selectmenu();
    select.selectmenu("refresh", true);
}