jQuery выборочное отображение ввода формы на основе выбранной опции выпадающего - PullRequest
Новая
       8

jQuery выборочное отображение ввода формы на основе выбранной опции выпадающего

0 голосов
/ 30 августа 2018 

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
        
});
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="Personal">Personal</option>
     <option value="Organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class"organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>

Я пытаюсь выборочно отображать ввод данных в зависимости от выбранных параметров. В форме есть кнопки для , чтобы добавить еще , который просто клонирует и добавляет клонированный html в конец div. Когда я нажимаю , добавьте еще и теперь у вас есть 2 выбранных тега, один из которых имеет выбранное значение как «Личное», а другой - «организация». Вместо того, чтобы выборочно показывать поля формы на основе оператора if / else, он показывает одинаковые поля формы для обоих, сохраняя при этом разные выбранные значения для каждого параметра раскрывающегося списка, то есть один раскрывающийся список показывает персональное состояние как выбранное, а другой - «Организация». Каждый раз, когда происходит событие on change для одного из них, одни и те же поля формы отображаются для обоих, а не для отображения полей формы на основе оператора if / else. 

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(".organization_name").hide();
      $(".given_name").show();
      $(".family_name").show();
    } else {
      $(".given_name").hide();
      $(".family_name").hide();
      $(".organization_name").show();
    }
  });
});

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

В приведенном выше коде значение personal не совпадает с Personal, т. Е. Вам нужно, чтобы p в маленькой строчке. B. Поэтому значения не совпадают

Вместо этого "if (event.target.value == 'Personal') {"

напишите это "if (event.target.value == 'personal') {"

0 голосов
/ 30 августа 2018

Проблема, с которой вы столкнулись, заключается в том, что вы выполняете свое шоу / скрытие на основе класса (например, .given_name), и все аналогичные поля формы будут иметь один и тот же класс, поэтому все они изменяются вместе. Попробуйте использовать .siblings, чтобы найти соответствующие поля для отображения / скрытия. У вас также есть опечатка в значении опции, это "personal", а не "Personal", и вы пропускаете "=" во вводе с классом organization_name. Вот рабочий фрагмент: 

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
    
});
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="personal">Personal</option>
     <option value="organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class="organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>
...