Question

我只是开始html / javascript，并尝试创建一个简单的表单，当从输入列表中选择“客户名称”时，填充特定的“客户代码”（就像excel vlookup）。我在stackoverflow上找到的示例均导致出现警报窗口，但我希望在表单中填充该值。

这是客户名称下拉列表的html代码段：

<select id="customername">
<option></option>
<option>Doe Inc</option>
<option> Smith LLC </option>
<option> Rogers and Co </option>

这是客户名到客户代码的映射： Doe Inc =276。SmithLLC =852。Rogersand Co = 552。

我希望每当客户名更新时（无需按钮），客户代码都更新为相应的客户名，因为这是较大形式的一部分，它将带有“提交”按钮（换句话说，我不希望用户必须单击“提交”以检索客户代码，然后稍后在表单中再次“提交”。

谢谢！

Answer 1

我希望这是您想要的。基本上，我使用数组来格式化您的数字，然后将onchange应用于select元素并等待更改。发生更改时，我将触发一个事件，Javascript将获取该字段的值，并将其与数组进行比较，然后根据所选值返回。

请参考Tieson T. Reply，对静态html有更多的解释和不同的方法！

var drop_down = document.getElementById("customername");
var result = document.getElementById("result");
var list_array = {
  "": "Please Select A Value",
  "Doe Inc": 276,
  "Smith LLC": 852,
  "Rogers and Co": 552
}

function change_value() {
  if (list_array[drop_down.value]) {
    result.innerHTML = list_array[drop_down.value];
  }
}

<select id="customername" onchange="change_value()">
  <option></option>
  <option>Doe Inc</option>
  <option>Smith LLC</option>
  <option>Rogers and Co</option>
</select>
  
<span id="result"></span>

Answer 2

要包含在表单提交中，您的表单控件需要成功的控件，这最简单的意义是它们需要一个name=""值：

<select id="customername" name="customername">
    <option></option>
    <option>Doe Inc</option>
    <option> Smith LLC </option>
    <option> Rogers and Co </option>
</select>

如果您真正关心的是客户代码，而客户名只是“友好”版本，则将value属性添加到您的选项中，并适当地重命名选择：

<select id="customercode" name="customercode">
    <option value="">Select one...</option>
    <option value="276">Doe Inc</option>
    <option value="852">Smith LLC </option>
    <option value="552">Rogers and Co </option>
</select>

如果您希望两个“值”都在表单上可见并包含在表单提交中，则可以使用data-属性来同步只读输入：

<select id="customername" name="customername">
    <option data-value="">Select one...</option>
    <option data-value="276">Doe Inc</option>
    <option data-value="852">Smith LLC </option>
    <option data-value="552">Rogers and Co </option>
</select>

<input type="text" name="customercode" id="customercode" readonly />

然后使用一些JavaScript进行同步：

var select = document.getElementById('customername');
select.onchange = function(e) {
  var value = select.options[select.selectedIndex].dataset.value;

  var input = document.getElementById('customercode');
  input.value = value;
}

示例jsFiddle：https://jsfiddle.net/27jx0q3a/3/

一些链接，对您有所帮助：

类似于vlookup的javascript，可将输入值从一个字段映射到另一个字段

2 个答案:

请参考Tieson T. Reply，对静态html有更多的解释和不同的方法！