如何根据具有相同值和id的下拉选择来管理文本字段的添加？
如何根据具有相同值和id的下拉选择来管理文本字段的添加？
提问于 2018-05-18 20:01:34
所以我用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个函数，因为我可以通过id="preinstallscripts5"编写5个针对id="preinstallscripts1"的不同函数，添加新下拉列表的按钮将包含一个var，从1开始，每次添加一个新的下拉列表，我将执行var++，并将这个变量作为.append(<select id="preinstallscripts"+var>回显到附加的HTML .append(<select id="preinstallscripts"+var>中。
这种方法是多余的，我觉得必须有更好的办法来解决这一问题。
编辑：关于更多的上下文，下面是在按下按钮时添加一个额外下拉列表的JQuery：
$(document).ready(function() {
var preInstallMax = 2; //maximum input boxes allowed
var preInstallWrapper = $(".preinstall-modal"); //Fields wrapper
var preInstallAdd = $(".addPreInstall"); //Add button ID
var z = 0; //initlal text box count
$(preInstallAdd).click(function(e){ //on add input button click
e.preventDefault();
if(z < preInstallMax){ //max input box allowed
z++; //text box increment
$(preInstallWrapper).append('<hr><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>Move Path</option><option>Remove Path</option><option>Link Path</option><option>CHMOD</option><option>CHMOD -R</option><option>CHOWN</option><option>CHOWN Group</option><option>Add Source</option><option>Remove Source</option><option>Run Script</option> </select> <span>Scripts</span> </label></div></div></div><div id="preinstall-inputs2"></div>'); //add input box
}
});
});下面是这个模式的屏幕截图，如果它有助于视觉化的话：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-19 04:42:06
我会做一些不同的事情。上面提到的许多注释都使用了唯一的ID，但我不太同意，因为jQuery为树遍历提供了许多有用的方法来添加上下文。
1)我会为您的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)，而不是附加HTML代码块。默认情况下，这些其他代码块将被隐藏。在基于用户选择的切换块方面，我们将对每个块使用数据属性，例如data-script。例如,
<div style="display:none" data-script="MovePath">
<!-- ... -->
</div>
<div style="display:none" data-script="RemovePath">
<!-- ... -->
</div>3)正如其中一条注释所指出的，在处理动态创建的元素时，需要使用委托事件处理。
$(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">×</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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50418500
复制相关文章
相似问题
腾讯云开发者
