切换 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">

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

您可以使用 javascript 来隐藏和显示基于选择框的 html 输入框。 将事件侦听器添加到选择框，它又可以调用函数，例如，

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

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

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

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;">