JavaScript 和 <选项>

标签 javascript html

我有以下 JavaScript。

<form>  
<select id="sel">
    <option value="1">item_1</option>
    <option value="2">item_2</option>
    <option value="3">item_3</option>
</select>
<div id="show"></div>

</form>

<script type="text/javascript">
var sel = document.getElementById('sel');
sel.onchange = function() {
  var show = document.getElementById('show');
  show.innerHTML = this.value;
};
</script>

如果我单击更改,新值(此处:1,2 或 3)将显示在 div“show”中。这工作正常。但我的问题是我想要显示不同的值,但应该提交值(1,2 或 3)。该元素的单位有公斤、磅、米、平方米……

我想要这样的东西:

<option value="1" value2="kg">item_1</option>

我改变了valuevalue2<script>但这没有帮助。

show.innerHTML = this.value2;

我怎样才能让它工作?

最佳答案

如果您应用@Simon所说的,您可以尝试以下操作:

sel.onchange = function() {
   var show = document.getElementById('show');
   show.innerHTML = this.options[this.selectedIndex].getAttribute('value2');
}

关于JavaScript 和 <选项>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9199760/

相关文章:

javascript - 如何将秒转换为分秒?

Javascript SVG 查看器库

php - Github API 列出所有存储库和 repo 的内容

html - 样式 ="top:-90px;"什么都不做

javascript - HTML 验证/脚本 JS

html - 尝试使输入采用所有可用宽度但不隐藏同级。适用于 Chrome,不适用于 FF

javascript - 从服务器获取一张图片,存入localStorage,并显示出来

javascript - javascript中的正则表达式复杂吗?

javascript - 无法解析 JSON 字符串

jquery - 覆盖 iframe 宽度