0

我刚刚开始 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。Smith LLC = 852。Rogers and Co = 552。

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

谢谢！

4

2 回答 2

1

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

请参考 Tieson T 的回复，对于静态 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>

于 2018-07-15T22:48:31.510 回答
1

为了包含在表单提交中，您的表单控件需要成功的控件，这最简单意味着它们需要一个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/

一些链接，以帮助：

于 2018-07-15T22:51:21.350 回答