如何在切换 HTML Select 框值时 hide/show HTML 输入框？

Question

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

HTML Select 框有两个值 (Metric/English)
HTML 带标签的输入框value_metric
HTML 带标签的输入框value_english

对于最终用户，我只需要显示的两个字段，即 select 框和相应的公制或英文输入框。切换 select 框 shows/hides 对应的输入框。

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

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

Answer 1

您可以使用javascript隐藏和显示基于select框的html输入框。将事件监听器添加到 select 框中，它又可以调用诸如

之类的函数

function toggleMetric(){
    var metricBox = document.getElementbyID('value_metric');
    var englishBox = document.getElementbyID('value_english');    

    metricBox.style.display = 'block';
    englishBox.style.display = 'none';
}

然后使用该值，您可以将输入框的样式更改为显示块或 none，具体取决于您是否要显示它。例如，

Answer 2

运行示例：希望这对您有所帮助

function myFunction(){
var _select_box_val = document.getElementById("select_box").value;
if("Metric"==_select_box_val){   
  document.getElementById("value_metric").style.display = "block";          
  document.getElementById("value_english").style.display = "none";
}else if("English"==_select_box_val){          
 document.getElementById("value_english").style.display = "block";          
 document.getElementById("value_metric").style.display = "none";
}
}
myFunction();

.hide{
   display:none;
  }

<select id="select_box" onchange="myFunction()">
   <option>Metric</option>
   <option>English</option>
  </select>
  <input type="text" placeholder="value_metric"  id="value_metric"  class="hide">
  <input type="text" placeholder="value_english" id="value_english" class="hide">

Answer 3

$('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">

Answer 4

$('select').change(function() {
       if($(this).val() == 'Metric') {
         $('#Metric').show();
         $('#English').hide();
       }else{
         $('#English').show();
         $('#Metric').hide();
       }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <select>
    <option value="Metric">Metric</option>
    <option value="English">English</option>
 </select>
<input type="text" name="Metric" id="Metric">
<input type="text" name="English" id="English" style="display: none;">

如何在切换 HTML Select 框值时 hide/show HTML 输入框？

How do I hide/show HTML input boxes when I toggle HTML Select box values?

html

javascript

forms

jquery

jquery-events