質問: お世話になります。 フォーム系のページの作成で行き詰まった事がありましたのでご質問させてください。 あるフォームで各項目に対して入力をおこない次のページに遷移します。 そして遷移先から元のページに戻った際、一度入力したセレクトボックスや プルダウンボックスに対して初期値やすでに選択した値を保持して再表示したい場合があるかと思います。 今回、動的に値を取得するプルダウン項目(option要素)に対して 表示値や設定値を取得する際に選択した項目に対しての設定(selected)が うまく反映できなくてご相談させていただきました。 jqueryを使用して下記のようにoption要素に対して表示値、入力値を生成していきます。 ``` // value値、テキストを指定して生成 $("#select_test").append($("").val(hogeCd).text(hogeName)); ``` ここまでは反映できたのですが、別途、選択した状態をさらに反映しようとするとなかなかうまく反映してくれません。 調べてみると htmlでいうと、このように反映するようにしたいのです。 ``` 選択肢1 ``` この selected="selected" の部分をjqueryを使用して入力値の生成を行うタイミングで反映したいのですが ``` // value値、テキストを指定して生成 $("#select_test").append($("").val(hogeCd).text(hogeName)); ``` こちらのような記述で「selected="selected"」の部分を反映するような方法はございますでしょうか。 お力いただけますと幸いでございます。よろしくお願いいたします。
回答: $()でDOMを生成するときに第2引数をkey:valueの形式で指定すると属性をつけられるので、selected:trueのつけるだけで良いかと。 ``` $(function(){ $("#select_test").append($("",{selected:true,val:"1",text:"いち"})); $("#select_test").append($("",{val:"2",text:"に"})); }) ``` 結果: ``` いち に ``` text,valもついでに突っ込んでおきました。 * 【jQuery】DOM要素の生成