

お世話になります。  
フォーム系のページの作成で行き詰まった事がありましたのでご質問させてください。

あるフォームで各項目に対して入力をおこない次のページに遷移します。  
そして遷移先から元のページに戻った際、一度入力したセレクトボックスや  
プルダウンボックスに対して初期値やすでに選択した値を保持して再表示したい場合があるかと思います。

今回、動的に値を取得するプルダウン項目（option要素）に対して  
表示値や設定値を取得する際に選択した項目に対しての設定（selected）が  
うまく反映できなくてご相談させていただきました。

jqueryを使用して下記のようにoption要素に対して表示値、入力値を生成していきます。

[code]

    // value値、テキストを指定して生成
    $("#select_test").append($("<option>").val(hogeCd).text(hogeName));
    
[/code]

ここまでは反映できたのですが、別途、選択した状態をさらに反映しようとするとなかなかうまく反映してくれません。  
調べてみると

htmlでいうと、このように反映するようにしたいのです。

[code]

    <select id="select_test">
    　　　<option value="1" selected="selected">選択肢１</option>
    </select>
    
[/code]

この  
selected="selected"  
の部分をjqueryを使用して入力値の生成を行うタイミングで反映したいのですが

[code]

    // value値、テキストを指定して生成
    $("#select_test").append($("<option>").val(hogeCd).text(hogeName));
    
[/code]

こちらのような記述で「selected="selected"」の部分を反映するような方法はございますでしょうか。

お力いただけますと幸いでございます。よろしくお願いいたします。


CC BY-SA 4.0
2018-08-30T16:24:58.477
47950
2018-08-30T17:20:03.977
27328
question
javascript html jquery css
jQuery でプルダウン項目（option 要素）を追加する際に選択状態の設定をしたい。


[.prop](http://api.jquery.com/prop/#prop2)を使えば実現できます。

[code]

    $("#select_test").append($("<option>").val(hogeCd).text(hogeName).prop("selected", true));
    
[/code]

以下がサンプルになります。

[code]

    $(function(){
      $("#select_test").append($("<option>").val("1").text("値1"));
      $("#select_test").append($("<option>").val("2").text("値2").prop("selected", true));
      $("#select_test").append($("<option>").val("3").text("値3"));
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
    <select id="select_test">
    <option value="">選択してください</option>
    </select>
    </form>
[/code]


CC BY-SA 4.0
2018-08-30T17:20:03.977
47952
2018-08-30T17:20:03.977
29553
47950
answer