本文介绍如何通过 JavaScript 监听 元素的变更事件，将用户选中的选项文本（而非仅 value）实时显示在指定 DOM 元素（如 ）中，适用于土耳其地址三级联动等场景。

本文介绍如何通过 javascript 监听 `` 元素的变更事件，将用户选中的选项文本（而非仅 value）实时显示在指定 dom 元素（如 `

`）中，适用于土耳其地址三级联动等场景。

在使用第三方地址 API（如 https://apicrow.com/adres/select.js）实现省/市（il）、区（ilçe）、街道（mahalle）三级联动时，常需将用户选择的文本内容（例如“İSTANBUL”）同步展示在页面其他位置（如

），而不仅限于表单提交。默认情况下，

的 value 属性通常对应选项的 value 值（可能为数字 ID），但实际需求往往是显示可见的文本内容（即 标签内的文字）。

要实现这一效果，关键在于监听 change 事件，并获取当前选中 的 textContent 或 innerText，而非 e.target.value（后者返回的是 value 属性值）。以下是两种推荐实现方式：

✅ 方式一：JavaScript 添加事件监听器（推荐，结构清晰、易于维护）

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const ilSelect = document.getElementById('ilselect');
    const testDiv = document.getElementById('test');

    ilSelect.addEventListener('change', function(e) {
      // 获取当前选中的 option 元素
      const selectedOption = e.target.options[e.target.selectedIndex];
      // 显示其可见文本（支持带空格、特殊字符、大小写等原始显示）
      testDiv.textContent = selectedOption ? selectedOption.textContent.trim() : '';
    });
  });
</script>

? 注意：e.target.options[e.target.selectedIndex] 确保准确获取用户真正看到的选项文本，避免因 value 与显示文本不一致导致的显示错误（例如 value="34" 对应显示 "İSTANBUL"）。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

✅ 方式二：内联 onchange（简洁但不推荐用于复杂逻辑）

<select id="ilselect" onchange="
  document.getElementById('test').textContent = 
    this.options[this.selectedIndex]?.textContent?.trim() || ''
"><!-- 选项由 select.js 动态注入 --></select>

⚠️ 注意事项：

• 务必确保脚本在 DOM 加载完成后执行（如使用 DOMContentLoaded 或将 <script> 放在 </script>