将所选选项从 html “select” 发布到其他字段

Question

我不擅长编写脚本，对此感到抱歉:)

我有 html/php 项目。我发现 javascript 让我的项目很棒 :) 但是......脚本作业是当用户在“输入”字段中输入一些文本时，该文本正在替换/发布到 DIV 中包含与输入相同名称的另一个字段。这很好用。

<LABEL FOR='profile_name'>Profile name:</LABEL>
<INPUT TYPE='text' ID='$id' NAME='profile_name' CLASS='variable'></INPUT>

但是我添加了带有一些选项的“选择”字段 - 执行与输入相同的操作 - 并且 javascripts 看起来工作正常，当我选择某个选项时，但只有当我按下“TAB”按钮时，或者当我按下选择文本填充在 DIV 字段上的“输入”按钮。 这是我的问题:(当用户输入内容时，“输入”字段在线“实时”脚本正在替换 DIV，但“选择” - 否 :(

请帮忙，谢谢！ 这是我的问题:(

完整代码： https://jsfiddle.net/tubeto/wamc9b7u/2/

选择不工作：

<LABEL FOR='PBH'>value:</LABEL></TD>
<SELECT TYPE='text' ID='$id' NAME='PBH' CLASS='variable'>
<OPTION selected>[PHB]</OPTION>
<OPTION value='be'>0</a></OPTION>
<OPTION value='af2'>2</OPTION>
<OPTION value='af4'>4</OPTION>
<OPTION value='ef'>5</OPTION>
</SELECT>

Answer 1

不确定是否能正确理解您的问题，但我会试一试。
您希望 <input> 和 <select> 值在 <div> 元素中重复，对吗？

您的问题似乎与 <select> 元素有关。也许那是因为<select> 比<input> 更复杂。

<input> 元素有一个值，但<select> 元素内部有选项，你必须获取所选<option> 元素的值：

select.addEventListener('input', function() {
    selectOutput.innerHTML = select.options[select.selectedIndex].innerHTML;
});

这是我理解的一个最小的工作示例（请在提问时注意它）：

window.onload = function() {
  var input = document.getElementById('input');
  var select = document.getElementById('select');
  var labelOutput = document.getElementById('labelOutput');
  var selectOutput = document.getElementById('selectOutput');

  input.addEventListener('input', function() {
    labelOutput.innerHTML = input.value;
  });

  select.addEventListener('input', function() {
    selectOutput.innerHTML = select.options[select.selectedIndex].innerHTML;
  });
}

<label for="profile_name">Profile name:</label>
<input type="text" id="input" name="profile_name">

<label for="PBH">value:</label>
<select id="select" name="PBH">
  <option selected="">[PHB]</option>
  <option value="be">0</option>
  <option value="af2">2</option>
  <option value="af4">4</option>
  <option value="ef">5</option>
</select>

<br>

<div>
  <span id="labelOutput"></span>
  <br>
  <span id="selectOutput"></span>
</div>