JavaScript如何动态获取input值与select选中项的文本和value值

问题描述 #

目前我将表格内的文本输入框与select下拉框的取值存储在options变量中，实现代码如下：

var options = $(tbody).find("select option:selected").map( (_, e) => $(e).text().trim() ).get();
var msgs = $(tbody).find("input[type='text']").map( (_, e) => $(e).val().trim() ).get();
options.splice(2, 0, msgs[0]);
options.splice(4, 0, msgs[1]);

当前我仅获取到了select选中项的文本，还需要同时获取对应选中项的value值，期望可以通过类似options[5].val的方式调用对应属性值，但该写法无法生效。请问符合JavaScript规范的常见实现方式是什么？

解决方案 #

你当前的options数组存储的是纯字符串类型的文本值，自然不支持通过属性访问的方式获取其他值。只需要将数组元素调整为对象结构，同时存储文本和value属性即可，修改后的实现如下：

1. 调整下拉框选中项的取值逻辑，返回包含text和val属性的对象

var selectItems = $(tbody).find("select option:selected").map((_, e) => ({
  text: $(e).text().trim(),
  val: $(e).val().trim()
})).get();

2. 文本输入框的取值也同步调整为相同结构，保证数组内元素格式统一

var msgs = $(tbody).find("input[type='text']").map((_, e) => ({
  text: $(e).val().trim(),
  val: $(e).val().trim()
})).get();

3. 原有插入逻辑无需调整，最终赋值给options变量

selectItems.splice(2, 0, msgs[0]);
selectItems.splice(4, 0, msgs[1]);
var options = selectItems;

修改完成后，你就可以按照预期的options[索引].val获取对应value值，options[索引].text获取对应显示文本，完全符合JavaScript原生语法规范。如果后续需要新增其他属性，直接在对象内添加对应键值对即可。

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