如何从html select中获取数据属性值

Question

如果我从选择中选择一个名称，我想创建一个表单。下一个输入字段将自动填充。

它适用于所选项目的值，但我无法使它适用于数据标记。

以下是一些简化的HTML:

<select class="select"  id="test " name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">

JavaScript(有效(：

function myFunction(e) {
document.getElementById("myText").value = e.target.value;
}

JavaScript(这不起作用(：

function myFunction(e) {
document.getElementById("myText").value = e.target.options[event.target.selectedIndex].dataset.adr;
}

第二个JavaScript示例有效，但前提是我不在选择中使用class="select"标记。那么CSS中一定有什么东西会干扰JavaScript部分？

是否有其他方法可以从所选项目中获取数据标记？

Answer 1

传入select作为参数，然后执行select.options[select.selectedIndex]以获取元素。这限制了作业所需的代码量。其余内容不言自明。

function myFunction(e) {
document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute("data-adr");
}

<select class="select" id="test " name="" onchange="myFunction(this)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">