选择动态属性并将选项追加到选定的"select"元素

Question

这是动态HTML的模板。当我点击"添加更多"时，id为plus5，我试图获得动态形式id，以便我可以选择#location元素，并可以将选项附加到它。

在动态形式中，我有dynamic_form,dynamic_form0,dynamic_form1和位置为location,location0,location1等。

$("#dynamic_form #plus5").on('click', function() {
// select the specidic dynamic form id , which can be dynamic_form , dynamic_form0,  dynamic_form1 and then select the location and then append options 
alert($(this).closest('#dynamic_form'));
});

<div class="form-group" id="dynamic_form">
<div class="row">
<div class="col-md-3">
<select type="text" name="location" id="location" placeholder="Enter Product Name" class="form-control"></select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Enter Product Quantity" onkeyup="if (/D/g.test(this.value)) this.value = this.value.replace(/D/g,'')" ;>
</div>
<div class="col-md-4">
<textarea class="form-control" rows="1" name="remarks" placeholder="Enter Remarks" id="remarks"></textarea>
</div>
<div class="button-group">
<a href="javascript:void(0)" class="btn btn-primary" id="plus5">Add More</a>
<a href="javascript:void(0)" class="btn btn-danger" id="minus5">Remove</a>
</div>
</div>
</div>

Answer 1

如果这是动态创建的内容，如问题所述，那么您应该避免在HTML中放置任何重复的id属性，当然也不要在运行时生成任何增量的id属性。

更好的方法是在所需的元素上使用相同的HTML结构和通用的类名，并在必要的地方/时间重复。然后，您可以使用委托的事件处理程序，它使用DOM遍历方法来查找给定结构中的相关内容。

请注意，在下面的示例中，相同的JS逻辑如何适用于示例中的所有form元素，并且仅影响相关form中的select。

$(document)
.on('input', '.quantity', e => {
e.target.value = e.target.value.replace(/D/g, '');
})
.on('click', '.plus5', e => { 
e.preventDefault();
let $form = $(e.target).closest('.form-group');
let $select = $form.find('.location');

// for this demo only -- update as required for your own use case
$select.append(i => `<option>${$select.children('option').length + 1}</option>`);
})
.on('click', '.minus5', e => {
e.preventDefault();
let $form = $(e.target).closest('.form-group');
let $select = $form.find('.location');
$select.children('option').slice(-5).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<select type="text" name="location" placeholder="Enter Product Name" class="form-control location"></select>
</div>
<div class="col-md-3">
<input type="text" class="form-control quantity" name="quantity" placeholder="Enter Product Quantity">
</div>
<div class="col-md-4">
<textarea class="form-control remarks" rows="1" name="remarks" placeholder="Enter Remarks"></textarea>
</div>
<div class="button-group">
<a href="#" class="btn btn-primary plus5">Add More</a>
<a href="#" class="btn btn-danger minus5">Remove</a>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<select type="text" name="location" placeholder="Enter Product Name" class="form-control location"></select>
</div>
<div class="col-md-3">
<input type="text" class="form-control quantity" name="quantity" placeholder="Enter Product Quantity">
</div>
<div class="col-md-4">
<textarea class="form-control remarks" rows="1" name="remarks" placeholder="Enter Remarks"></textarea>
</div>
<div class="button-group">
<a href="#" class="btn btn-primary plus5">Add More</a>
<a href="#" class="btn btn-danger minus5">Remove</a>
</div>
</div>
</div>

作为题外话，我删除了内联事件处理程序，因为这是不好的做法。我将其替换为另一个委托事件处理程序来处理更新数量值。