如何根据下拉列表克隆包含文本框显示的表单

Question

我对根据下拉列表显示文本框的 j 查询函数有疑问，如果用户 select 单身：显示 "first name and last name once"，如果 select 双：显示 "first name and last name twice"，它适用于第一行但不适用于克隆行，有什么建议吗？？ FIDDLE

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var genroomid = 2; // change 0 to the number you want to start with
      $(".add-row").click(function() {
        var $clone = $("ul.personal-details").first().clone();
        var $input = $clone.find('#roomid');
        $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
        $clone.append("<button type='button' class='remove-row'>-</button>");
        $clone.insertBefore(".add-row");
        genroomid++; // increase id by 1
      });
      $(".form-style-9").on("click", ".remove-row", function() {
        $(this).parent().remove();
        genroomid--;
      });
      var blkofcod1 = "<select class='stretch' name='prefix[]'><option value='Mr'>Mr</option><option value='Ms'>Ms</option><option value='Child'>Child</option><option value='Infant'>Infant</option></select>";
      var blkofcod2 = "<input  name='fname[]'  type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30' required >&nbsp;<input  name='lname[]' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' required  >";
      var blkofcod3 = "<input name='nationality[]'  type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' required >";
      $('#roomtype').change(function() {
        var value = $(this).val();
        var toAppend = '';
        switch (value) {
          case 'None':
            toAppend = $("#container").html(toAppend);
            return;
            break;
          case 'Single':
            toAppend = blkofcod1 + blkofcod2 + blkofcod3;
            $("#container").html(toAppend);
            return;
            break;
          case 'Double':
            toAppend = blkofcod1 + blkofcod2 + blkofcod3 + "<br>" + blkofcod1 + blkofcod2 + blkofcod3;
            $("#container").html(toAppend);
            return;
            break;
          default:
            toAppend = $("#container").html(toAppend);
            return;
        }
      });

    });
  </script>
</head>

<body>
  <form id="form1">
    <span class="form-style-9">
    <ul class="personal-details">
    <div>
         <select id="roomtype" class="stretch"  name="roomtype[]" required="required">
         <option value="None"> None </option>
       <option value="Single"> Single </option>
         <option value="Double"> Double </option>
        </select>
       <div id="container"></div>

    </div>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
    </span>
  </form>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
    <form>
        <div>
        <select class="dropdown">
            <option value="1" >One</option>
            <option value="2" >Two</option>
            <option value="3" >Three</option>
            <option value="4" >Four</option>
            <option value="5" >Five</option>

        </select>
        </div>
        <div class="field-wrap">
        <div class="row">
            <input type="text" name="firstname[]" placeholder="First Name">
            <input type="text" name="lastname[]" placeholder="Last Name">
        </div>
        </div>
    </form>
    <script type="text/javascript">
        $(function(){
            $('.dropdown').change(function(){
                let dval = $(this).val();
                let fHTML = "";
                for (let i = 0; i < dval; i++) 
                    fHTML += '<div class="row"><input type="text" name="firstname[]" placeholder="First Name"><input type="text" name="lastname[]" placeholder="Last Name"></div>'
                $('.field-wrap').html(fHTML);
            });
        })
    </script>
</body>
</html>

Answer 2

只需稍加调整您的代码。根据我对您问题的理解，以下作品：

解释:

$('#roomtype').change(function () {})变成了$(document).on('change', '#roomtype', function() {})

答案使用 jQuery 中的委托事件处理程序。 jQuery 文档中的这一点进一步解释。

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

在您的代码中，页面初始化时只有第一个 select 字段存在，因此稍后添加的任何其他 select 字段（当单击“+ New Client”按钮时），不受现有更改处理程序的约束。

答案中的委托事件处理程序实现将事件绑定到 document。它可以是任何其他 DOM 元素，只要它在注册事件处理程序时存在即可。

By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

在此处阅读更多内容：http://api.jquery.com/on/

其次，使代码正常工作所需的其他更改是如何在您的代码中找到 #container。使用 $('#container') searches from the root of the DOM and in this case will almost always find the first element. Changing$('#container')to$(this).siblings('#container')finds the closest#container` 更改 select 字段。

Fiddle: http://jsfiddle.net/5x1Lfedj/15/

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with
  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++; // increase id by 1
  });


  $(".form-style-9").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  var blkofcod1 = "<select class='stretch' name='prefix[]'><option value='Mr'>Mr</option><option value='Ms'>Ms</option><option value='Child'>Child</option><option value='Infant'>Infant</option></select>";
  var blkofcod2 = "<input  name='fname[]'  type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30' required >&nbsp;<input  name='lname[]' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' required  >";
  var blkofcod3 = "<input name='nationality[]'  type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' required >";

  $(document).on('change', '#roomtype', function() {
    var value = $(this).val();
    var toAppend = '';
    var $container = $(this).siblings('#container')

    switch (value) {
      case 'None':
        toAppend = $container.html(toAppend);
        return;
        break;

      case 'Single':
        toAppend = blkofcod1 + blkofcod2 + blkofcod3;
        $container.html(toAppend);
        return;
        break;

      case 'Double':
        toAppend = blkofcod1 + blkofcod2 + blkofcod3 + "<br>" + blkofcod1 + blkofcod2 + blkofcod3;
        $container.html(toAppend);
        return;
        break;

      default:
        toAppend = $container.html(toAppend);
        return;
    }
  });

});

如何根据下拉列表克隆包含文本框显示的表单

how to clone form that includes text box display depended on drop down list

jquery

clone