Question

我有一个带有下拉列表的简单表单，我想根据下拉列表中的选择预先填充另外两个输入表单。

我的代码：

<select>
  <option person="ben">Ben</option>
  <option person="henry">Henry</option>
  <option person="julia">Julia</option>
  <option person="joe">Joe</option>
</select>

<br/>
<br/>
<b>Age</b>
<br/>
<input type="text" age="age">
<br/>
<b>Gender</b>
<br/>
<input type="text" gender="gender">

让我们假设我在下拉列表中选择Julia，然后我希望自动填充年龄和性别，但可以在自动填充后随时由用户更改。我是这一切的新手，但我猜JavaScript是要走的路（jQuery左右）。

如果你能给我一个例子，我真的很感激。

Answer 1

您可以使用JQuery：

const peopleData = {
  'Ben'  : { age: 42, gender: 'Male' },
  'Henry': { age: 21, gender: 'Male' },  
  'Julia': { age: 35, gender: 'Female' },
  'Joe'  : { age: 19, gender: 'Male' }
}

$(document).ready(function(){
  $("#person").change(function() {
    var person = $(this).val();
    $('#age').val(peopleData[person].age)
    $('#gender').val(peopleData[person].gender)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="person">
  <option person="ben">Ben</option>
  <option person="henry">Henry</option>
  <option person="julia">Julia</option>
  <option person="joe">Joe</option>
</select>
<hr/>
<div>Age</div>
<input type="text" id="age">
<div>Gender</div>
<input type="text" id="gender">

这使用一个JSON对象，其中包含有关每个人的数据。

当在菜单中选择某人时，它会根据此人的相应数据设置输入字段的值。

vue-loader

Answer 2

const ageInput = document.querySelector("[age]")
const genderInput = document.querySelector("[gender]")

document.querySelector("select").addEventListener("change", (e) => {
  if (e.target.value === "Julia") {
    ageInput.value = 21
    genderInput.value = "female"
  }
})

<select>
  <option person="ben">Ben</option>
  <option person="henry">Henry</option>
  <option person="julia">Julia</option>
  <option person="joe">Joe</option>
</select>

<br/>
<br/>
<b>Age</b>
<br/>
<input type="text" age="age">
<br/>
<b>Gender</b>
<br/>
<input type="text" gender="gender">

根据选择下拉列表填写表单

2 个答案: