2

私は要素を持つJQMページを持っていますselect:

<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'));
});

しかし、期待どおりには機能しませんでした。

スクリーンショット:

ここに画像の説明を入力

問題は、デフォルトまたは選択されたオプションの値にすべての状態が含まれていることです。

4

2 に答える 2

8

私の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>

説明のためにコードを少し変更しました。ボタンを追加し、クリックを添付しました。クリックしている間に、いくつかのランダムな値を動的に追加し、選択したオプションを動的に追加されたオプションの 1 つに変更します。次に、選択メニューを再初期化し、メニューを更新しました。

スクリプトの最後の 2 行が答えです。

于 2012-12-13T05:52:03.010 に答える