JavaScript で選択したオプションを設定する

1. JavaScript で document.getElementById() を使用して要素の選択を設定する
2. JavaScript で document.querySelector() を使用して要素を選択する

select は、ユーザーが任意のオプションを選択できるドロップダウンオプションのリストを指定する HTML 入力要素です。今日の記事では、JavaScript でこの HTML 要素の値を設定する方法を学びます。

JavaScript で document.getElementById() を使用して要素の選択を設定する

JavaScript によって提供されるこの組み込みの document メソッドは、id が指定された id と一致する要素オブジェクトを返します。実際の値は、element.value = 'NEW_VALUE'の行で設定されます。

構文

document.getElementById($id);

パラメータ

$id：一致する必要がある HTML 属性の $id を指定する必須パラメーターです。

戻り値

対応する要素が見つかった場合、対応する DOM 要素オブジェクトを返します。それ以外の場合は、null を返します。

コード例：

<select id="osDemo">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.getElementById('osDemo').value = 'MacOS'">
Click to Update to MacOS.
</button>

出力：

JavaScript で document.querySelector() を使用して要素を選択する

これは、JavaScript によって提供される組み込みの document メソッドであり、selector が指定されたセレクターと一致する要素オブジェクトを返します。querySelector() と querySelectorAll() の唯一の違いは、最初のオブジェクトが単一の一致する要素オブジェクトであり、次に一致する要素のすべてのオブジェクトが返されることです。無効なセレクターが渡されると、SyntaxError が発行されます。実際の値は、element.value = 'NEW_VALUE'の行で設定されます。

構文

document.querySelector($selector);

パラメータ

$selector：class または id のいずれかの一致条件を指定する必須パラメーターです。この文字列は、有効な CSS 選択文字列である必要があります。

戻り値

DOM 内のセレクター条件を満たす最初に一致する要素オブジェクトを返します。

コード例：

<select id="osDemo" class="osDemoClass">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.querySelector('.osDemoClass').value = 'MacOS'">
Click to Update to MacOS.
</button>

出力：