jquery 根据选定的下拉选项有选择地显示表单输入

Question

$( 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>

我正在尝试 select 根据 selected 选项主动显示表单输入。该表单具有用于 添加更多 的按钮，它只是克隆并将克隆的 html 附加到 div 的底部。当我单击 添加更多 时，现在有 2 个 select 标签，其中一个的 selected 值为 'Personal'，另一个为 [=32= "organization" 的 ]ed 值。它不是 select 根据 if/else 语句主动显示表单字段，而是为两者显示相同的表单字段，同时为每个下拉选项保留不同的 selected 值，即一个下拉列表显示个人为 selected，另一个显示组织。每次为其中之一触发更改事件时，都会为两者显示相同的表单字段，而不是根据 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();
    }
  });
});

Answer 1

您遇到的问题是您正在根据 class（例如 .given_name）执行 show/hide，并且所有类似的表单字段都将具有相同的 class，所以他们一起改变。尝试使用 .siblings 找到 show/hide 的适当字段。您在选项值中也有一个拼写错误，它是 "personal"，而不是 "Personal"，并且您在 class 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>

Answer 2

在你上面的代码中，personal 的值与 Personal 不匹配，即你需要有小的 personal p letter.b这就是值不匹配的原因

而不是这个 " if (event.target.value == 'Personal') {"

写这个"if (event.target.value == 'personal') {"

jquery 根据选定的下拉选项有选择地显示表单输入

jquery selective display of form inputs based on selected dropdown option

javascript

forms

jquery

html-select

dropdown