<select>タグで特定のvalueの<option>タグを選択状態にしたい

Question

動的に吐き出される<select>タグで特定のvalueの<option>タグをjsで選択状態にしたいです。

具体的には以下の構成で、

<select id="hoge">
<option value="hoge1">・・・<option>
<option value="hoge2">・・・<option>
<option value="hoge3">・・・<option>
<option value="hoge4">・・・<option>
<option value="hoge5">・・・<option>
<option value="hoge6">・・・<option>
<option value="hoge7">・・・<option>
<option value="hoge8">・・・<option>
</select>

以下の通り「value=3」を選択状態にしたいです。

<select id="hoge">
<option value="hoge1">・・・<option>
<option value="hoge2">・・・<option>
<option value="hoge3" selected>・・・<option>
<option value="hoge4">・・・<option>
<option value="hoge5">・・・<option>
<option value="hoge6">・・・<option>
<option value="hoge7">・・・<option>
<option value="hoge8">・・・<option>
</select>

ご教授のほどよろしく御願い致します。

Comments

[退会済みユーザー]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

[izkn]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

初めて回答します

$("#hoge").val("hoge3");

という事？

Comments

[castail]

ご回答ありがとうございました。

ご教授頂いた内容で実現できました！
感謝いたします。

Answer 2

$('#hoge option').filter(
    function() { return $(this).text() == '選択したいテキスト'; }
).prop('selected', true);

でいかがでしょうか。

Comments

[castail]

ご回答ありがとうございます。

せっかくですが「sonicgear」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。

Answer 3

bodyタグのonloadイベントに下記ファンクションを読んであげる
function onLoad(value){
var elms = document.getElementById("hoge");
if (elms){
for(i = 0; i < elms.options.length; i++){
if (elms.options[i].value == value){
elms[i].selected = true;
break;
}
}
}
}

Comments

[castail]

ご回答ありがとうございます。

コメントが遅くなり申し訳ございません。
例のvalueをわかりやすく数字の連番にしていますが、実際はユニークな文字列です。
誤解を招き申し訳ございません。選択したいvalueの文字列(hoge3)を指定する方法でご教授願えませんでしょうか？

[flat]

castailさんへ
こちらの回答にある関数は選択したいvalueの文字列を引数に渡して使うものですよ。

// IE8以下ではaddEventListenerは動作しません
document.addEventListener( 'DOMContentLoaded', function() {
onLoad('hoge3');
}, false );

ただ、関数内のfor文で変数の宣言が出来ていないので、i = 0; となっている箇所を var i = 0; に修正する必要があります。

jQueryならsonicgearさんの回答にある方法で良いです。

$(function(){
$("#hoge").val("hoge3");
});

また、動的に生成されたセレクトボックスがクライアントサイドのJavaScriptで生成されている場合、それよりも前にonLoad()が実行されてしまうと、動的に追加された要素を読み込めずにonLoad()の処理が最後まで実行されないので注意して下さい。

ちなみに、技術的な課題以前に、何をどうして良いのか全く分からないというのであれば、せめて初心者アイコンを付けた方が良いです。
回答する側もそれを前提にした回答をしてくれるはずです。

[castail]

ご回答ありがとうございます。

こちらのご説明と知識が足りずご迷惑をお掛けいたします。
ご指摘の通り今後は初心者マークを付けて質問したいと思います。

なお、せっかくですが今回は「sonicgear」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。