Скрыть и показать элементы формы, когда загружена предварительно выбранная опция - PullRequest
Новая
       17

Скрыть и показать элементы формы, когда загружена предварительно выбранная опция

0 голосов
/ 03 февраля 2020

У меня есть jQuery, чтобы показать и скрыть поля формы. Я начинаю с того, что скрываю их 

$('#edit-profile-letter-of-introduction-field-sign-off').hide();
$('#edit-profile-letter-of-introduction-field-signatory').hide();
$('#edit-profile-letter-of-introduction-field-position').hide();

И затем у меня появляется событие изменения, которое показывает и скрывает их в соответствии со значением поля выбора 

$('#edit-profile-letter-of-introduction-field-template-und').change(function() {
  switch ($(this).val()) {
   case '1':
   $('#edit-profile-letter-of-introduction-field-sign-off').show();
   $('#edit-profile-letter-of-introduction-field-signatory').hide();
   $('#edit-profile-letter-of-introduction-field-position').hide();
   break;

   etc etc

Работает нормально. Затем я сохраняю форму. Когда форма возвращается, все поля снова скрываются.

То, что я хочу сделать, это когда форма загружена, и уже есть выбор в поле выбора - или когда поле выбора имеет значение по умолчанию - тогда я хочу, чтобы другие поля формы были скрыты или показаны, но не требуя события изменения.

Затем я хочу, чтобы событие изменения работало, если пользователь изменяет значение поля выбора.

1 Ответ

1 голос
/ 04 февраля 2020

Пожалуйста, обратитесь к примеру кода ниже. В приведенном ниже примере я загружаю ввод со значением по умолчанию «test», поэтому первый случай будет выполнен при загрузке. И затем, если вы измените ввод на «test1», он выполнит второй случай. Точно так же вы можете добавить другие случаи. 

<input type="text" id="demoInput" value="test">
<lable id="lbl">test</lable>
<lable id="lbl1">test1</lable>
<lable id="lbl2">test2</lable>



$(document).ready(function(){
 var defaultValue = $("#demoInput").val();
 hideShowElements(defaultValue);
  $("#demoInput").change(function(){   
    hideShowElements($(this).val());
  });
});
function hideShowElements(defaultValue){
  switch (defaultValue) {
   case 'test':
    $("#lbl").show();
    $("#lbl1").hide();
    $("#lbl2").hide();
   break;
   case "test1":
   $("#lbl").hide()
    $("#lbl1").show();
    $("#lbl2").show();
   break;
   };
 }
...