代码之家 › 专栏 › 技术社区 › brg

jquery基于所选下拉选项选择性显示表单输入

html-form dropdown html-select jquery javascript

brg · 技术社区 · 6 年前

$( 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的底部 添加更多 现在有两个select标记,一个选择值为“Personal”,另一个选择值为“organization”。它不是基于if/else语句有选择地显示表单字段,而是为两者显示相同的表单字段,同时为每个下拉选项保留不同的选择值,即一个下拉列表显示选定的个人,另一个显示组织。每次触发其中一个的onchange事件时,都会为这两个字段显示相同的表单字段,而不是基于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 回复 | 直到 6 年前

Nick SamSmith1986 6 年前

你所面临的问题是你是在基于类来显示/隐藏(例如。 .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>

user10224254 user10224254 6 年前

而不是“如果”(事件.目标.值=='个人'){”

写下这个“如果(事件.目标.值=='个人'){”