javascript - 从自定义属性中获取数据到输入字段

Question

我有一个国家表格。这些字段是 country 和 country_code。

第一个字段将是 country_code，例如 DE 代表德国，IT 代表意大利，NL 代表荷兰。

现在 country_code 字段有一个带有全名的自定义属性；

<option data-country="Netherlands" value="NL">NL</option>

我现在希望，一旦选择了 country_code，另一个输入(国家)将填充 data-country="Netherlands" 属性。所以用户不必写完整的国家名称。

对于我的示例，我想使用 jQuery，但老实说我不知道​​从哪里开始。我也不知道我是否朝着正确的方向前进。

问题:

A) 我的思考方向是否正确？

B) 如何以最简单的方式达到我想要的结果？

C) 是否有任何其他方法可以做到这一点？

代码块:

<!-- Country_short input -->
<select id="country_code" name="country_code">
    <option value="" disabled selected>Choose a Country Code</option>
    <option data-country="Netherlands" value="NL">NL</option>
    <option data-country="Germany" value="DE">DE</option>
</select>

<!-- Country input -->
<label for="country">Country</label>
<input id="country" class="" type="text" value="" name="country">

<!-- Button -->
<button type="submit">Start Ticket</button>

Answer 1

为此您需要执行一些步骤:

1. 将 change 事件分配给 country_code 下拉列表
2. 然后当一个option被选择或改变时，你需要寻找被选择的选项，这样你就可以获得data属性country这是data-country。
3. 现在，您可以将此值设置为要显示它的 country 元素。

$('#country_code').change(function() {
  var countryName = $('#country_code option:selected').data('country');
  $('#country').val(countryName);
  $('[for="country"]').addClass('active');
});

.active{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country_code" name="country_code">
  <option value="" disabled selected>Choose a Country Code</option>
  <option data-country="Netherlands" value="NL">NL</option>
  <option data-country="Germany" value="DE">DE</option>
</select>

<!-- Country input -->
<label for="country">Country</label>
<input id="country" class="" type="text" value="" name="country">

<!-- Button -->
<button type="submit">Start Ticket</button>