从另一个输入字段的下拉列表中自动获取值答案

【问题标题】：Get value automatically from dropdown in another input field从另一个输入字段的下拉列表中自动获取值
【发布时间】：2020-06-28 10:26:12
【问题描述】：

我有一个选择下拉菜单，可以从我公司不同部门的用户那里获取邮件。我想，当用户从下拉列表中选择部门名称时，部门的邮件地址将自动设置在下一个输入字段中。

<select class="form-control" id="mail_type" name="email_to" onChange="getMailtype(this.value)" required>
  <option value="support@mail.com" selected>Support</option>
  <option value="bill@mail.com">Billing</option>
  <option value="sales@mail.com">Sales</option>
 </select>

 <span id="mail_info">
 <input type="text" name="email" class="form-control" value="support@mail.com" readonly>
  </span>

所以，我在这里选择一个选项，电子邮件输入字段将使用 js 自动获取值

【问题讨论】：

你能澄清你的问题吗？请参阅How to Ask、help center。

标签： javascript html jquery

【解决方案1】：

获取input并设置select的值

function getMailtype(value) {
  document.querySelector("#mail_info input").value = value;
}

<select class="form-control" id="mail_type" name="email_to" onChange="getMailtype(this.value)" required>
  <option value="support@mail.com" selected>Support</option>
  <option value="bill@mail.com">Billing</option>
  <option value="sales@mail.com">Sales</option>
</select>

<span id="mail_info">
 <input type="text" name="email" class="form-control" value="support@mail.com" readonly>
  </span>

【讨论】：

【解决方案2】：

const getMailtype = (target) => {
  $("#mail_info > input[name='email'")[0].value = target.value;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="mail_type" name="email_to" onChange="getMailtype(this)" required>
  <option value="support@mail.com" selected>Support</option>
  <option value="bill@mail.com">Billing</option>
  <option value="sales@mail.com">Sales</option>
</select>

<span id="mail_info">
 <input type="text" name="email" class="form-control" value="support@mail.com" readonly>
  </span>

【讨论】：