使用JavaScript实现下拉框选中项在Div中显示的方法

没问题，这个需求很容易实现，用原生JavaScript就能搞定。直接在你的HTML代码里添加一段脚本就行，具体步骤和完整代码如下：

具体实现思路 #

• 先获取页面上的下拉框（#automobili）和目标div（#prvi）元素
• 给下拉框绑定change事件监听器，当用户切换选项时自动触发
• 在事件处理函数中，提取选中选项的文本内容，再把它赋值给目标div的内容

完整代码示例 #

<body>
  <h1>VEZBA STRUKTURA</h1>
  <div id="prvi"></div>
  <select name="automobili" id="automobili">
    <option value="1">BMW</option>
    <option value="2">AUDI</option>
    <option value="3">OPEL</option>
    <option value="4">FERARI</option>
    <option value="5">SKODA</option>
    <!-- 可以继续添加其他选项 -->
  </select>

  <script>
    // 获取页面元素
    const selectBox = document.getElementById('automobili');
    const targetDiv = document.getElementById('prvi');

    // 绑定下拉框的切换事件
    selectBox.addEventListener('change', function() {
      // 获取当前选中选项的显示文本
      const selectedText = this.options[this.selectedIndex].text;
      // 将文本插入到目标div中
      targetDiv.textContent = `你选中了：${selectedText}`;
      // 如果只想单纯显示选中的文本，改成 targetDiv.textContent = selectedText; 即可
    });

    // 可选：页面加载完成时，默认显示第一个选项的内容
    window.addEventListener('load', function() {
      const defaultText = selectBox.options[selectBox.selectedIndex].text;
      targetDiv.textContent = `当前选中：${defaultText}`;
    });
  </script>
</body>

小细节说明 #

• 如果需要获取选项的value值（比如1、2这类），可以把this.options[this.selectedIndex].text换成this.value
• 用textContent设置内容比innerHTML更安全，能避免潜在的XSS风险
• 页面加载时的默认显示是可选功能，不需要的话直接删掉对应的代码块就行

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