Как скрыть / показать поля ввода HTML при переключении значений блока выбора HTML?

Question

Предположим, что есть форма со следующими тремя полями:

• HTML Поле выбора с двумя значениями (Метрика / Английский)
• Поле ввода HTML с меткой value_metric
• Поле ввода HTML с меткой value_english

Для конечного пользователя мне нужны только два показанных поля, поле выбора и соответствующее поле ввода метрики или английского языка.Переключение в поле выбора показывает / скрывает соответствующие поля ввода.

Как это сделать?Как скрыть одно, показывая другое?Я ищу способ работы, а не фактический код.

Например, могу ли я скрыть его, отключить, сделать его доступным только для чтения, сделать что-то еще?Я хочу, чтобы он легко обновлялся и менялся при переключении поля «Выбор».

Answer 1

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

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

Вы можете использовать javascript, чтобы скрыть и показать поля ввода html на основе поля выбора.Добавьте Eventlistener в поле выбора, которое, в свою очередь, может вызывать такие функции, как

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

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

. Затем с этим значением вы можете изменить стиль поля ввода, чтобы он был отображаемым блоком или нет, в зависимости от того, хотите ли вы показатьэто или нет.Например,