Post选择的选项从html " select "到其他字段

Post the selected option from html “select” to other field

本文关键字：select 其他 字段 html 选择 选项 Post      更新时间：2023-09-26

我不是很擅长写脚本，很抱歉:)

我有html/php项目。我发现javascript，使我的项目惊人:)但是…脚本作业是当用户在"输入"字段中输入一些文本时，该文本将替换/发布到DIV中包含相同名称的另一个字段，如输入。效果很好。

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

但是我添加了一些选项的"选择"字段-做同样的事情，如输入-和javascript看起来工作得很好，当我选择了一些选项，但只有当我按下"TAB"按钮，或者当我按下"Enter"按钮，选择文本填充在DIV字段。这是我的问题:("输入"字段，当用户输入的东西脚本在线"直播"正在取代DIV，但"选择"- NO:

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

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

SELECT not working:

<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>

我不确定是否理解你的问题，但我会试一试。
你想让<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>

相关文章：