首页 > 解决方案 > 填充字段文本区域不同的选择

问题描述

我已经被这个问题困住了几天。我正在尝试创建选择并通过选择填充“textarea”中的字段。我做了什么以及我正在尝试做什么的一个例子。图像已编辑。我不知道如何创建多个提供相同文本区域的选择。

function fillFild() {
  var myList = document.getElementById("myList");
  document.getElementById("fild").value = myList.options[myList.selectedIndex].value;
}

function fillFild1() {
  var myList = document.getElementById("myList1");
  document.getElementById("fild1").value = myList.options[myList.selectedIndex].value;
}
<form name="Form">
  Select your Device:
  <select id="myList" name="select_field" onchange="fillFild();">
    <option value="Laptop: ">Laptop</option>
    <option value="PC:">PC</option>
    <option value="Smartphone: ">Smartphone</option>
    <option value="Tablet: ">Tablet</option>
  </select>
  <form name="Form1">
    Select your Problem:
    <select id="myList1" name="select_field" onchange="fillFild1();">
      <option value="Software: ">Software</option>
      <option value="Hardware:">Hardware</option>
    </select>

    <textarea name="TextArea" id="fild1" style="position:absolute;left:23px;top:153px;width:394px;height:119px;z-index:5;" rows="7" cols="47" spellcheck="false"></textarea>
  </form>

说明我正在尝试做的事情

提前致谢!

标签: javascripthtml

解决方案


我看到你正在努力添加一个帖子。您添加的那个已经关闭,您仍然添加几乎相同的内容。不是这样;) 首先,仔细阅读如何提问how-to-ask

下面你有你的问题的解决方案:

const selectElements = document.querySelectorAll('.select_field');
const textArea = document.querySelector('textarea');

[].slice.call(selectElements).map(el => el.addEventListener('change', e => {
  const selcted = e.target.value;
  if (selcted !== '') {
    textArea.value += selcted + '\n';
  }
}));
<div>
  Select your Device:
  <select id="myList" name="select_field" class="select_field">
    <option value="">-- choose --</option>
    <option value="Laptop:">Laptop</option>
    <option value="PC:">PC</option>
    <option value="Smartphone:">Smartphone</option>
    <option value="Tablet:">Tablet</option>
  </select>
</div>
<div>
  Select your Problem:
  <select id="myList1" name="select_field" class="select_field">
    <option value="">-- choose --</option>
    <option value="Software:">Software</option>
    <option value="Hardware:">Hardware</option>
  </select>
</div>
<textarea name="TextArea" id="fild1" rows="7" cols="47" spellcheck="false"></textarea>


推荐阅读