HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのoption valueプロパティとは？構文とサンプルコードで学ぶ使い方

HTML DOMのvalueプロパティは、<select>要素内の<option>要素が持つ値（value属性）を取得・変更するためのプロパティです。この値は、フォーム送信時にサーバーへ送られるデータとして使用されます。

基本情報

<option>要素にvalue属性が指定されている場合、その属性値を操作します。value属性が指定されていない場合は、<option>要素内のテキスト内容が代わりに返される点に注意してください。

構文

値を取得する場合

object.value

値を変更する場合

object.value = "テキスト"

サンプルコード

以下は、HTML DOMのoption valueプロパティを使った実際の動作例です。ドロップダウンリストで選択した科目の値を、ボタンをクリックして表示します。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Option value Demo</h1>
<p>好きな教科を選択してください：</p>
<select class='drop-down'>
<option value="Physics">物理</option>
<option value="Maths">数学</option>
<option value="Chemistry">化学</option>
<option value="English">英語</option>
</select>
<button onclick="showValue()" class="btn">値を表示</button>
<div class="show"></div>
<script>
    function showValue() {
        var dropDown = document.querySelector(".drop-down");
        var msg = document.querySelector(".show").innerHTML="選択された値は: " + dropDown.options[dropDown.selectedIndex].value;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのoption valueプロパティとは？構文とサンプルコードで学ぶ使い方

ドロップダウンリストから好きな教科を選択し、「値を表示」ボタンをクリックすると、選択された<option>要素のvalue属性の値が画面に表示されます。

HTML DOMのoption valueプロパティとは？構文とサンプルコードで学ぶ使い方

ポイントまとめ

  • valueプロパティは、<option>要素のvalue属性の値を取得・設定できる。
  • フォーム送信時には、表示されているテキストではなくvalue属性の値がサーバーへ送信される。
  • selectedIndexと組み合わせることで、現在選択中のオプションの値を簡単に参照できる。

  1. HTML DOMのnodeValueプロパティとは？ノード値の取得・設定方法を実例付きで解説

    HTML DOMのnodeValueプロパティは、ノードの値に対応する文字列を取得または設定するために使用されます。DOM操作において、テキストノードや属性ノードの中身を扱う際に非常に便利な基本プロパティです。構文（値の取得）ノードの値を文字列として取得する場合は、以下のように記述します。Node.nodeValue取得される戻り値は、ノードの種類によって以下のように異なります。ドキュメントノードおよび要素ノード：「null」が返される属性ノード：その属性の「value」の値が返されるテキストノードおよびコメントノード：それぞれの内容（テキストやコメント文）が返される構文（値の設定）nodeV

  2. HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説

    HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <