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

Question

Assume there is a form with the following three fields:

• HTML Select box with two values (Metric/English)
• HTML Input box with label value_metric
• HTML Input box with label value_english

For end-user I want only the two fields shown, the select box, and the corresponding metric or English Input box. Toggling the select box shows/hides the corresponding input boxes.

How do I do this? How do I hide one while showing the other? I am looking for the method of operation, not necessarily the actual code.

For example, do I hide it, disable it, make it read only, do something else? I want it to seamlessly update and swap when I toggle the Select box.

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

Running example: Hope this helps

 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

You can use javascript to hide and show the html input boxes based on the select box. Add a Eventlistener to the selectbox which in turn can call functions such as,

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

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

Then with that value you can then change the style of the input box to be display block or none depending if you want to show it or not. For example,

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