javascript - 选择选项时如何自动设置表单中的输入值？

Question

我有一个表格，例如:

<form>
   <ul>

   <li>
   <select name="choose">
   <option value="0">1</option>
   <option value="1">1</option>
   <option value="2">2</option>

   </select>
   </li>

   <li><h2>No. Of person</h2></li>
    <input type="text" name="ref_person"id="field" value="" />

   <li><h2>earning of person:</h2></li>
    <input type="text" name="ear_person" id="field" value="" />

   </ul>
   </form>

所以，当我选择 option:1 时，两个输入字段都必须填写 no。假设人数 = 3，人的收入 = 5 美元。

Answer 1

您的问题应该尽可能写得好，包括有效的语义 HTML。

此外，问题应该包含您尝试过的代码、对您尝试过的内容的解释、哪里出了问题以及您期望它做什么，包括一些示例输入和输出。

以下内容可能会有所帮助。请注意，元素 ID 必须是唯一的，并且表单应使用语义标记(例如，不要使用列表来呈现它、不要将标题放在列表中、使用标签、使用字段集对元素进行分组等)。

您可以使用 select 元素的更改事件来获取所选选项的值和文本，并将其显示在表单中的其他位置。您还可以引用表单控件作为表单的命名属性，这比使用 getElementById 更方便、更直接。

在代码中，对 select 的引用使用 this 传递给函数。每个表单控件都有一个 form 属性，它是对其所在表单的引用。其余部分应该很容易理解，但请询问您是否需要其他帮助。

function getPerson(select) {
  var form = select.form;
  form.ref_person.value = select.options[select.selectedIndex].text;
  form.ear_person.value = select.value;
}

<form>
  <fieldset><legend>Person and earning</legend>
  <label for="personSelect">Select a person
    <select name="choose" id="personSelect" onchange="getPerson(this)">
      <option value="0">1</option>
      <option value="100">2</option>
      <option value="500">3</option>
    </select>
  </label>
  <br>
  <label for="personNumber">No. Of person:
    <input type="text" name="ref_person"id="personNumber"></label>

  <label for="personEarning">Earning of person:
    <input type="text" name="ear_person" id="personEarning"></label>
  </fieldset>
</form>