optionObject.textプロパティ

optionObject.textは、選択肢(option要素)のテキストを取得、もしくは、設定するプロパティ。

選択肢(option要素)のテキストとは、option要素で括るテキストのこと。

構文

取得

var $text = $optionElementReference.text;

戻り値

選択肢(option要素)のテキスト。

設定

$optionElementReference.text = "テキスト";
テキスト
option要素で括るテキストを指定。

サンプル

ドロップダウンリスト:

選択した選択肢のインデックス番号:

選択した選択肢のテキスト:

選択した選択肢の値:

サンプルの動作について

  • 「変更」ボタンをクリックすると、選択中の選択肢のテキストを、1行テキスト入力欄に入力したテキストに変更する。
  • ドロップダウンリストの選択肢を選択すると、選択した選択肢のインデックス番号、テキスト、値を、表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setText() {
    var $elementReference = document.getElementById( "sample" );
    var $text = document.getElementById( "setText" ).value;
    $elementReference.options[$elementReference.selectedIndex].text = $text;
    getIndex();
}
function getIndex() {
    var $elementReference = document.getElementById( "sample" );
    document.getElementById( "sampleOutputIndex" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].index;
    document.getElementById( "sampleOutputText" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].text;
    document.getElementById( "sampleOutputValue" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].value;
}
window.onload = function () {
    getIndex();
}
</script>

HTML

<p>
    <input type="text" id="setText" value="テキスト" />
    <button onclick="setText()">変更</button>
</p>
<p>
    ドロップダウンリスト:
    <select id="sample" onchange="getIndex()">
        <option value="選択肢1の値">選択肢1</option>
        <option value="選択肢2の値">選択肢2</option>
        <option value="選択肢3の値" selected>選択肢3</option>
        <option value="選択肢4の値">選択肢4</option>
        <option value="選択肢5の値">選択肢5</option>
    </select>
</p>
<p>
    選択した選択肢のインデックス番号:<span id="sampleOutputIndex"></span>
</p>
<p>
    選択した選択肢のテキスト:<span id="sampleOutputText"></span>
</p>
<p>
    選択した選択肢の値:<span id="sampleOutputValue"></span>
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Optionオブジェクト, リファレンス パーマリンク