【徹底解説】JavaScriptでselectボックスの選択された値を取得する5つの方法

2024-04-02

JavaScriptでドロップダウンリストの選択された値を取得する方法

selectedIndex プロパティを使う

最も簡単な方法は、selectedIndexプロパティを使うことです。このプロパティは、選択されているオプションのインデックス番号を返します。

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

const select = document.getElementById('my-select');
const selectedIndex = select.selectedIndex;
const selectedValue = select.options[selectedIndex].value;

console.log(selectedValue); // 2

selectedOptionsプロパティは、選択されているオプションの配列を返します。

<select id="my-select" multiple>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

const select = document.getElementById('my-select');
const selectedOptions = select.selectedOptions;

for (const option of selectedOptions) {
  console.log(option.value);
}

// 1
// 2

changeイベントを使うと、ユーザーがドロップダウンリストの値を変更したときにイベントが発生します。

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

const select = document.getElementById('my-select');

select.addEventListener('change', () => {
  const selectedValue = select.options[select.selectedIndex].value;
  console.log(selectedValue);
});

その他の方法

上記以外にも、querySelectorや$.val()などを使って選択された値を取得することができます。

JavaScriptでドロップダウンリストの選択された値を取得するには、いくつかの方法があります。どの方法を使うかは、状況によって異なります。

selectedIndex プロパティを使う

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

<button onclick="getSelectedValue()">選択された値を取得</button>

<script>
function getSelectedValue() {
  const select = document.getElementById('my-select');
  const selectedIndex = select.selectedIndex;
  const selectedValue = select.options[selectedIndex].value;

  alert(`選択された値は ${selectedValue} です。`);
}
</script>

selectedOptions プロパティを使う

<select id="my-select" multiple>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

<button onclick="getSelectedValues()">選択された値を取得</button>

<script>
function getSelectedValues() {
  const select = document.getElementById('my-select');
  const selectedOptions = select.selectedOptions;

  let selectedValues = '';
  for (const option of selectedOptions) {
    selectedValues += `${option.value}, `;
  }

  alert(`選択された値は ${selectedValues.slice(0, -2)} です。`);
}
</script>

change イベントを使う

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

<p id="selected-value"></p>

<script>
const select = document.getElementById('my-select');
const selectedValueElement = document.getElementById('selected-value');

select.addEventListener('change', () => {
  const selectedValue = select.options[select.selectedIndex].value;
  selectedValueElement.textContent = `選択された値は ${selectedValue} です。`;
});
</script>

ドロップダウンリストの選択された値を取得するその他の方法

querySelectorを使う

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

<button onclick="getSelectedValue()">選択された値を取得</button>

<script>
function getSelectedValue() {
  const select = document.querySelector('#my-select');
  const selectedValue = select.querySelector('option:selected').value;

  alert(`選択された値は ${selectedValue} です。`);
}
</script>

$.val()を使う (jQuery)

jQueryを使用している場合は、$.val()メソッドを使って選択された値を取得することができます。

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

<button onclick="getSelectedValue()">選択された値を取得</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function getSelectedValue() {
  const select = $('#my-select');
  const selectedValue = select.val();

  alert(`選択された値は ${selectedValue} です。`);
}
</script>