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

Question

前提・実現したいこと

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

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

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

undefined

と表示されていました。

該当のソースコード

<input type="text" id="test_id" value="" name="test_name" list="test_list"onblur="test();">
<datalist id="test_list">
<option value="test1" label="001"></option>
<option value="test2" label="002"></option>
<option value="test3" label="003"></option>
<option value="test4" label="004"></option>
</datalist>

 function test() {
var a = document.getElementById("test_id").label;
console.log(a);
}

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

function test() {
  var key = document.getElementById("test_id").getAttribute("value");
  var a = ""
  for(var opt of document.getElementById("test_list").children){
    if(opt.getAttribute("value")==key){
      a = opt.getAttribute("label")
      bleak;
    }
  }
  console.log('label:'+a);
}

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#test_id').addEventListener('blur',function(e){
    var t=e.target;
    var op=document.querySelector('#'+t.getAttribute('list')+' option[value='+t.value+']');
    if(op) console.log(op.label);
  });
});
</script>
<input type="text" id="test_id" value="" name="test_name" list="test_list" >
<datalist id="test_list">
<option value="test1" label="001"></option>
<option value="test2" label="002"></option>
<option value="test3" label="003"></option>
<option value="test4" label="004"></option>
</datalist>

Comments

[G-ym]

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

Answer 2

window.onload = () => {
			document.getElementById('test_id').addEventListener('blur', (e) => {
				let obj = e.target
				let key = obj.value;
				let a = null;
				Array.from(document.getElementById('test_list').children).forEach((opt) => {
					if(opt.value == key){
						a = opt.label;
					}
				});
				console.log(a);
			});
		}