如何获取select下拉框自定义属性值并设置到文本框？

没问题，这事儿超简单！我直接给你完整的实现代码，再拆解关键步骤，保证你一看就懂。

首先我们完善HTML结构，加上用来显示自定义属性值的文本框，再用JavaScript监听下拉框的选择变化事件：

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <!-- 你的下拉框 -->
  <select class="class" id="someid" name="someName">
    <option data-othervalue="helloWorld" value="some value">three</option>
    <option data-othervalue="fooBar" value="another value">four</option>
    <option data-othervalue="testData" value="third value">five</option>
  </select>
  <!-- 用来展示自定义属性值的文本框 -->
  <input type="text" id="resultInput" placeholder="自定义属性值会显示在这里">
</form>

<script>
// 获取下拉框和文本框元素
const selectElement = document.getElementById('someid');
const resultInput = document.getElementById('resultInput');

// 监听下拉框的选择变化事件
selectElement.addEventListener('change', function() {
  // 拿到当前选中的option元素
  const selectedOption = this.options[this.selectedIndex];
  // 读取自定义data属性的值，两种方法任选其一
  // 方法1：用dataset（推荐，符合HTML5规范）
  const customValue = selectedOption.dataset.othervalue;
  // 方法2：用getAttribute，兼容更老浏览器
  // const customValue = selectedOption.getAttribute('data-othervalue');
  
  // 将值设置到文本框中
  resultInput.value = customValue;
});

// 可选：页面加载时默认显示第一个选项的自定义属性值
window.addEventListener('load', function() {
  const firstOption = selectElement.options[0];
  resultInput.value = firstOption.dataset.othervalue;
});
</script>
</body>
</html>

给你拆解几个关键细节：

• 监听选择变化：给select绑定change事件，用户每切换一次选项就会触发这个事件。
• 获取选中的option：this.options[this.selectedIndex]能精准拿到当前选中的选项，这里的this就是触发事件的下拉框本身。
• 读取自定义属性：
  • 如果你用的是HTML5标准的data-*属性（比如你的data-othervalue），优先用dataset.othervalue读取——注意要去掉属性名里的data-，如果属性名是data-other-value这种带连字符的，要转成驼峰dataset.otherValue。
  • 要是需要兼容特别老的浏览器，就用getAttribute('data-othervalue')，写法更直接。
• 设置到文本框：直接把拿到的自定义属性值赋值给文本框的value属性就搞定了。

另外我加了页面加载时的默认值设置，打开页面就能看到第一个选项的自定义属性值，不用非得切换选项才显示，这个是可选功能，你可以根据需求去掉。

内容的提问来源于stack exchange，提问作者Alshoja