Question

所以我正在使用Bootstrap构建一个表单，并且我有一个包含下拉列表的模态。需要根据用户选择显示两个或三个文本字段，我已经弄清楚了这一点：

表格：

<div class="row">
    <div class="form-group input-group">
        <div class="col">
            <label for="preinstallscripts" class="has-float-label">
                <select class="form-control spacing" name="preinstallscripts" id="preinstallscripts" required>
                    <option value="">Choose...</option>
                    <option value="MovePath">Move Path</option>
                    <option value="RemovePath">Remove Path</option>
                    <option value="LinkPath">Link Path</option>
                    <option value="chmod">CHMOD</option>
                    <option value="chmod -r">CHMOD -R</option>
                    <option value="chown">CHOWN</option>
                    <option value="chown group">CHOWN Group</option>
                    <option value="AddSource">Add Source</option>
                    <option value="RemoveSource">Remove Source</option>
                    <option value="RunScript">Run Script</option>
                </select>
                <span>Scripts</span>
            </label>
        </div><!-- End Column -->
    </div><!-- End Form Group -->
</div><!-- End Row -->

我的JQuery：

$(document).ready(function() {
    $('#preinstallscripts').change(function(e) {
        e.preventDefault();

        var selection = $(this).val();

        if (selection === 'MovePath') {
            $('#preinstall-inputs').html('<div class="row" style="margin-bottom: -10px;"><div class="form-group input-group"><div class="col"><input type="text" name="preinstall[movepath][]" id="preinstall-movepath" class="form-control"></div><div class="col"><input type="text" name="preinstall[movepath][]" id="preinstall-movepath" class="form-control"></div></div></div>');
        };
    });
});

这是我的问题出现的地方，在该模式中，我有一个按钮来添加额外的下拉列表，但是这个下拉列表将包含具有完全相同值的完全相同的选项。如果我添加一个下拉列表，然后从中选择一些内容，它将不会添加文本字段，因为添加的下拉列表与初始下拉列表具有相同的id，并且JQuery将无法正常工作，因为现在有两个下拉列表与id="preinstallscripts"。

我认为按下按钮时必须有一种在我的页面上编辑JQuery的方法，这样如果有人按下按钮添加额外的下拉列表，我粘贴的功能将更新为目标新的下拉列表。但我这样做，那么之前（初始）下拉列表将不会更改其文本字段，如果用户返回并更改其选择，因为JQuery函数现在定位新下拉列表的新ID。

我认为在实践中写入5个JQuery函数是一个糟糕的想法，即使只使用了1个，因为我可以编写5个不同的函数，目标是id="preinstallscripts1"到id="preinstallscripts5"和添加的按钮新的下拉列表将包含var，从1开始，每次添加新的下拉列表时，我都会var++，并将该var回显到附加的HTML中{{1} }}

这种方法是多余的，我觉得好像必须有更好的方法来解决这个问题。

编辑：对于更多上下文，这里是按下按钮时添加额外下拉列表的JQuery：

.append(<select id="preinstallscripts"+var>

这是模式的截图，如果它有助于可视化：

Answer 1

我会做一些不同的事情。上面提到的许多评论都使用了唯一的ID，但我不太同意，因为jQuery为tree traversing添加context有很多有用的方法。

1）我会为你的“preinstall脚本”HTML代码块构建一个模板，因为它是你将要重用的东西。

<div id="template" style="display:none">
    <div class="row">
        <div class="form-group input-group">
            <div class="col">
                <label class="has-float-label">
                    <!-- note the use of class instead of id -->
                    <select class="form-control spacing preinstallscripts" required>
                        <option value="">Choose...</option>
                        <option value="MovePath">Move Path</option>
                        <option value="RemovePath">Remove Path</option>
                        <option value="LinkPath">Link Path</option>
                        <!-- etc -->
                    </select>
                    <span>Scripts</span>
                </label>
            </div>
        </div>
        <!-- add HTML code here for step 2 -->
    </div>
</div>

2）当用户从下拉列表中选择一个选项时，我会根据选择和 {2} toggle HTML代码块（{1}}而不是附加HTML代码块。）相对于当前行容器。默认情况下，这些其他代码块将被隐藏。在根据用户选择切换块的方面，我们将使用data-attribute，例如data-script到每个街区。例如，

<div style="display:none" data-script="MovePath">
    <!-- ... -->
</div>

<div style="display:none" data-script="RemovePath">
    <!-- ... -->
</div>

3）正如其中一条评论指出的那样，在处理动态创建的元素时，您需要使用delegated event handling。

$(document).on('change', '.preinstallscripts', function (e) {
    var row = $(this).closest('.row');
    // toggle row's blocks based off user's selection
    row.find('[data-script]').each(function () {
        $(this).toggle(this.dataset.script == e.target.value);
    });
});

4）在添加新的“预安装脚本”块方面，请使用模板。

$('.addPreInstall').click(function () {
    modal.find('.modal-body').append(template.html());
});

<强>样本

$(function() {
  var template = $('#template'),
    modal = $('.preinstall-modal');

  $(document).on('change', '.preinstallscripts', function(e) {
    var row = $(this).closest('.row');
    // toggle row's blocks based off user's selection
    row.find('[data-script]').each(function() {
      $(this).toggle(this.dataset.script == e.target.value);
    });
  });

  $('.addPreInstall').click(function() {
    // append a new row
    modal.find('.modal-body').append(template.html());
    // trigger initial click
  }).click();


  modal.modal('show');

});

.preinstall-modal .row {
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.preinstall-modal .row:first-child {
  border-top: none;
  padding-top: 0;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.1/dist/bootstrap-float-label.min.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- MODAL -->

<div class="modal preinstall-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Preinstall scripts</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-success addPreInstall">Add Another Preinstall Script</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- TEMPLATE -->

<div id="template" style="display:none">
  <div class="row">
    <div class="form-group input-group">
      <div class="col">
        <label class="has-float-label">
						<!-- note the use of class instead of id -->
						<select class="form-control spacing preinstallscripts" required>
							<option value="">Choose...</option>
							<option value="MovePath">Move Path</option>
							<option value="RemovePath">Remove Path</option>
              <option value="LinkPath">Link Path</option>
              <!-- etc -->
						</select>
						<span>Scripts</span>
					</label>
      </div>
    </div>
    <div style="display:none" data-script="MovePath">
      Insert Move Path HTML code
    </div>
    <div style="display:none" data-script="RemovePath">
      Insert Remove Path HTML code
    </div>
    <div style="display:none" data-script="LinkPath">
      Insert Link Path HTML code
    </div>
  </div>

</div>

如何根据具有相同值和ID的下拉列表选择来管理文本字段的添加？

1 个答案: