如何在用户选择select选项时展示对象数组中对象的属性值

1. 完整代码实现 #

直接上可运行的完整代码，包含选项渲染、选中展示、自定义添加全部功能：

<!-- 选择器 -->
<select id="optionSelect">
  <option value="">请选择选项</option>
</select>

<!-- 自定义输入区域 -->
<div class="input-group">
  <input type="text" id="field1Input" placeholder="field_1值">
  <input type="text" id="field2Input" placeholder="field_2值">
  <input type="text" id="field3Input" placeholder="field_3值">
  <button id="addBtn">添加自定义选项</button>
</div>

<!-- 结果展示区域 -->
<div id="resultDisplay"></div>

<script>
// 初始选项数组
const options = [
  { id: 1, field_1: "值1-1", field_2: "值1-2", field_3: "值1-3" },
  { id: 2, field_1: "值2-1", field_2: "值2-2", field_3: "值2-3" },
  { id: 3, field_1: "值3-1", field_2: "值3-2", field_3: "值3-3" }
];

const selectEl = document.getElementById('optionSelect');
const resultEl = document.getElementById('resultDisplay');
const addBtn = document.getElementById('addBtn');

// 渲染select选项
function renderOptions() {
  selectEl.innerHTML = '<option value="">请选择选项</option>';
  options.forEach(opt => {
    const option = document.createElement('option');
    option.value = opt.id;
    option.textContent = `${opt.field_1}（预览）`; // 用field_1做选项显示文本，可按需修改
    selectEl.appendChild(option);
  });
}

// 渲染选中的字段值（单独行展示）
function renderSelectedResult(selectedObj) {
  if (!selectedObj) {
    resultEl.innerHTML = '';
    return;
  }
  resultEl.innerHTML = `
    <p>${selectedObj.field_1}</p>
    <p>${selectedObj.field_2}</p>
    <p>${selectedObj.field_3}</p>
  `;
}

// 监听选择变化
selectEl.addEventListener('change', function() {
  const selectedId = parseInt(this.value);
  const selectedOption = options.find(opt => opt.id === selectedId);
  renderSelectedResult(selectedOption);
});

// 添加自定义选项
addBtn.addEventListener('click', function() {
  const field1 = document.getElementById('field1Input').value.trim();
  const field2 = document.getElementById('field2Input').value.trim();
  const field3 = document.getElementById('field3Input').value.trim();
  
  if (!field1 || !field2 || !field3) {
    alert('请填写所有字段值');
    return;
  }
  
  // 生成自增ID
  const maxId = options.length ? Math.max(...options.map(opt => opt.id)) : 0;
  const newOption = {
    id: maxId + 1,
    field_1: field1,
    field_2: field2,
    field_3: field3
  };
  
  options.push(newOption);
  renderOptions();
  
  // 清空输入框
  document.getElementById('field1Input').value = '';
  document.getElementById('field2Input').value = '';
  document.getElementById('field3Input').value = '';
});

// 页面加载完成后初始化
window.addEventListener('load', renderOptions);
</script>

2. 关键逻辑说明 #

• 选项渲染：renderOptions函数负责把数组对象转换成select的option元素，每次添加新选项后重新调用，保证选项列表实时更新。
• 选中展示：监听select的change事件，用find方法匹配选中ID对应的对象，直接将三个field值用<p>标签逐行渲染到结果区域——不需要额外存到单独数组，直接用原数组匹配即可。
• 自定义添加：点击按钮时校验输入完整性，生成自增ID的新对象加入数组，再重新渲染选项列表。

3. 灵活扩展：循环遍历字段 #

如果不想硬编码三个field字段（比如后续可能加field_4），可以修改renderSelectedResult函数，通过循环自动遍历所有field开头的属性：

function renderSelectedResult(selectedObj) {
  if (!selectedObj) {
    resultEl.innerHTML = '';
    return;
  }
  let html = '';
  for (const key in selectedObj) {
    if (key.startsWith('field_')) {
      html += `<p>${selectedObj[key]}</p>`;
    }
  }
  resultEl.innerHTML = html;
}

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