to の ID を持つ選択フィールドを持つフォームがあります。javascript関数内で選択した値を取得したい。この関数を初めて実行すると、選択した値が取得されませんが、関数を 2 回目に実行すると、関数が取得されます。.text を試しましたが、うまくいきませんでした。ご助力ありがとうございます。
var e = document.getElementById("to");
var str = e.options[e.selectedIndex].innerHTML;
to の ID を持つ選択フィールドを持つフォームがあります。javascript関数内で選択した値を取得したい。この関数を初めて実行すると、選択した値が取得されませんが、関数を 2 回目に実行すると、関数が取得されます。.text を試しましたが、うまくいきませんでした。ご助力ありがとうございます。
var e = document.getElementById("to");
var str = e.options[e.selectedIndex].innerHTML;
初めて実行するときは、要素がレンダリングされる前に実行していますか? その場合は、document.ready またはページ読み込みイベントを待つ必要があります。
select 要素のテキストと値の両方を取得する作業例
HTML
<select id="foo">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button id="bar">Console it</button>
JavaScript
function getText() {
var sel = document.getElementById("foo");
var option = sel.options[sel.selectedIndex];
//assuming that there is always a selection
var text = option.text;
var value = option.value;
console.log(text, value);
}
document.getElementById("bar").onclick = getText;
getText();
</p>
動作例フィドルでは、値を読み取ろうとすると onload が実行されていることがわかります。
onReady 関数に入れてみてください。ページが完全に読み込まれる前に JS が実行されているのではないでしょうか? jQuery を使用している場合:
$(document).ready(function(){
alert($("#to option:selected").text());
)};