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

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

  •  1
  • 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 年前
        1
  •  1
  •   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>
        2
  •  0
  •   user10224254 user10224254    6 年前

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

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