HTML5のdatalistで選択されたラベルの値を取得。

前提・実現したいこと

HTML5のdatalistで選択されたラベルの値を取得したいです。

発生している問題・エラーメッセージ

下記のコードで取れると思ったのですがConsoleを見てみると

undefined

と表示されていました。

該当のソースコード

html
1<input type="text" id="test_id" value="" name="test_name" list="test_list"onblur="test();">
2<datalist id="test_list">
3<option value="test1" label="001"></option>
4<option value="test2" label="002"></option>
5<option value="test3" label="003"></option>
6<option value="test4" label="004"></option>
7</datalist>

javasclipt
1 function test() {
2var a = document.getElementById("test_id").label;
3console.log(a);
4}
5

↓修正後　Consoleを見るとaは空白でlabelは取得できていませんでした。

javascript
1function test() {
2  var key = document.getElementById("test_id").getAttribute("value");
3  var a = ""
4  for(var opt of document.getElementById("test_list").children){
5    if(opt.getAttribute("value")==key){
6      a = opt.getAttribute("label")
7      bleak;
8    }
9  }
10  console.log('label:'+a);
11}
12

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#test_id').addEventListener('blur',function(e){
4    var t=e.target;
5    var op=document.querySelector('#'+t.getAttribute('list')+' option[value='+t.value+']');
6    if(op) console.log(op.label);
7  });
8});
9</script>
10<input type="text" id="test_id" value="" name="test_name" list="test_list" >
11<datalist id="test_list">
12<option value="test1" label="001"></option>
13<option value="test2" label="002"></option>
14<option value="test3" label="003"></option>
15<option value="test4" label="004"></option>
16</datalist>

投稿2018/11/26 05:02

yambejp

総合スコア117674

G-ym

2018/11/26 06:24

値が取れました、ありがとうございます。

行動規範の内容に同意します

javascript
1window.onload = () => {
2			document.getElementById('test_id').addEventListener('blur', (e) => {
3				let obj = e.target
4				let key = obj.value;
5				let a = null;
6				Array.from(document.getElementById('test_list').children).forEach((opt) => {
7					if(opt.value == key){
8						a = opt.label;
9					}
10				});
11				console.log(a);
12			});
13		}