Question

每次点击Add More Students链接时，我都会克隆整个div。

克隆有效，但无法从克隆div的克隆选择框中选择一个选项。

HTML

      <div id="all">
        <div id="student" class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Firstname</label>
                    <label style="color:red;" id="std_first_name_error"></label>
                    <div class="append-icon">
                        <input type="text" id="std_first_name" name="std_first_name1" id="password" class="form-control" placeholder="Enter first name" minlength="4" maxlength="16" required>
                        <i class="icon-lock"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Select School</label>
                    <label style="color:red;" id="std_scl_error"></label>
                    <div class="option-group">
                      <select  name="std_scl_name1" class="language" required>


                        <option value="">Select school..</option>

                        <?php foreach ($schools as $school) :?>
                            <option value="<?php echo $school->sch_id; ?>"><?php echo $school->sch_name;?></option>
                        <?php endforeach; ?>

                      </select>
                    </div>
                  </div>
            </div>
        </div>
        </div>

        <div id="add_student"><a><u>Add More Students</u></a></div>

脚本

    <script type="text/javascript">

        $(document).ready(function(){       
        var count = 2;
        $('#add_student').click (function(e){
            e.preventDefault();
            var clonedEl = $('#student').first().clone();
            clonedEl.find(':text').attr('name','std_first_name'+count);
            //Add the newly div the the entire div
            $('#all').append(clonedEl);

            //$('[name="std_scl_name'+count+'"]').html($('[name="std_scl_name1"]').html());

          });
      });
        </script>

应用

enter image description here

Answer 1

你的相同代码在this fiddle中效果很好。我更改/添加的是唯一的<option>元素。我仍然可以从克隆的div <select>中选择一个元素。

我认为你需要检查的是php片段及其输出。它可能不会提供<option>元素。

Answer 2

每个元素的id属性应该是唯一的。由于您使用id="student"和id="add_student"，因此会克隆这些内容并导致重复的元素ID。在此JSFiddle中，这些ID已被class="student"和class="add_student"替换。

对于任何进一步的查询，请务必使用班级选择器$('.student')和$('.add_student')。

克隆后无法从选择框中选择选项

2 个答案: