javascript - 如何在切换 HTML 选择框值时隐藏/显示 HTML 输入框？

Question

假设有一个表单包含以下三个字段:

• 具有两个值(公制/英制)的 HTML 选择框
• 带有标签 value_metric 的 HTML 输入框
• 带有标签 value_english 的 HTML 输入框

对于最终用户，我只需要显示的两个字段、选择框和相应的度量或英文输入框。切换选择框显示/隐藏相应的输入框。

我该怎么做？如何在显示另一个的同时隐藏一个？ 我要找的是操作方法，不一定是实际代码。

例如，我是隐藏它、禁用它、只读它，还是做其他事情？我希望它在我切换选择框时无缝更新和交换。

Answer 1

$('select').change(function(){
if($(this).val()==="metric"){
    $('.metric_val').show();
    $('.english_val').hide();
}else{
    $('.english_val').show();
    $('.metric_val').hide();
}
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="type">
  <option value="metric">Metric</option>
  <option value="english">English</option>
</select>

<input class="metric_val" type="text" name="metric_val" placeholder="METRIC">
<input class="english_val" type="text" name="english_val" placeholder="ENGLISH">