JavaScript 获取父页面下拉菜单选中值 - 前端 Thymeleaf 实践

假设你的父页面下拉菜单的 HTML 代码如下：

<select id='mySelect' onchange='updateValue()'>
  <option value='value1'>Option 1</option>
  <option value='value2'>Option 2</option>
  <option value='value3'>Option 3</option>
</select>

其中，onchange 事件会在下拉菜单选中项改变时触发 updateValue() 函数。

在子页面中，你可以使用 JavaScript 获取父页面中下拉菜单选中的值。代码如下：

var parentSelectValue = window.opener.document.getElementById('mySelect').value;

其中，window.opener 表示当前子页面的父页面，document 表示父页面的文档对象，getElementById('mySelect') 表示获取 id 为 'mySelect' 的元素，.value 表示获取该元素的值。

如果你在前端使用 Thymeleaf 模板引擎，你可以将该值绑定到子页面的 HTML 元素上。代码如下：

<!-- 在子页面中定义一个<input>元素，用于显示父页面下拉菜单选中的值 -->
<input id='myInput' type='text' th:value='${parentSelectValue}' />

其中，th:value='${parentSelectValue}' 表示将 parentSelectValue 的值绑定到该元素的 value 属性上。注意，你需要在子页面的 JavaScript 代码中定义 parentSelectValue 变量，并将其赋值为父页面下拉菜单的选中值。