NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. javascript
  3. javascript list属性からdatalistを取得する

javascript list属性からdatalistを取得する

javascript list属性からdatalistを取得する

javascriptで、list属性からdatalistを取得するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 105.0.5195.102
Javascript サンプル集はこちら

datalistを取得

datalistを取得するには、listプロパティを利用します。

<input id="hoge" type="text" name="hoge" list="d" />
<input id="btn" type="button" value="ボタン" />

<datalist id="d">
  <option>data1</option>
  <option>data2</option>
  <option>data3</option>
</datalist>

<script>

'use strict';

document.getElementById('btn').onclick = function () {

  const elm = document.getElementById('hoge')

  // コンソールに出力
  console.log(elm.list);

}

</script>
use strictについてはこちら

実行結果を確認すると、「datalist」の状態が、コンソールに表示されて変更されていることが確認できます。

また、以下のコードを、

document.getElementById('btn').onclick = function () {

  const elm = document.getElementById('hoge')

  // コンソールに出力
  console.log(elm.list);

}

アロー関数とdocument.getElementByIdを省略して、簡潔に記述することもできます。

btn.onclick = () =>{

  // コンソールに出力
  console.log(hoge.list);

}
アロー関数の使い方