提问人：Leeya 提问时间：9/7/2023 更新时间：9/7/2023 访问量：62
克隆的表单元素 -> ID 更新为数字 -> 获取下拉列表的值
Cloned Form elements -> Ids updated with a number -> Get value of the dropdown
问：
根据下拉列表中选择的数字克隆表单。克隆表单上的选择和输入字段 ID 会更新为一个数字，例如 OrderType1、OrderType2 等。现在我需要检索下拉列表 OrderType1 的值并显示一个 div。
下面是代码。克隆效果很好。
//DUPLICATE PLUGIN
$.fn.duplicate = function (count, cloneEvents) {
var tmp = [];
for (var i = 0; i < count; i++) {
$.merge(tmp, this.clone(cloneEvents).get());
}
return this.pushStack(tmp);
};
//SELECT CHANGE FUNCTION (on change get value and clone)
$('#case').change(function () { // on change...
var numOfClones = $(this).val(); // get value...
$('#holder').html(''); // empty holder if there are some old clones
$('#caseNumber').duplicate(numOfClones).addClass('new').appendTo('#holder').show();
$('#caseNumber.new').each(function (idx) {
idx = $(this).index() + 1;
$('select', this).each(function () {
$(this).attr('name', $(this).attr('name') + idx).attr('id', $(this).attr('name'));
});
$('input', this).each(function () {
$(this).attr('name', $(this).attr('name') + idx).attr('id', $(this).attr('name'));
});
$('#caseNumbering', this).each(function () {
$(this).text("Case Number " + idx++);
});
});
});
$("#orderType-req1").change(function (event) {
alert("You have Selected :: " + $(this).val());
});
谢谢
答：
0赞
76484
9/7/2023
#1
我不确定我是否完全理解你想要实现的目标，但我想我已经明白了要点。
问题在于，动态克隆了 Order Type 元素的 and 属性，因此您没有绑定事件处理程序的静态选择器。idname<select>
我的建议是向原始属性添加一个属性，该属性将是所有克隆通用的静态属性 - 例如，数据属性，例如 .<select>data-order-type
然后，使用事件委派，我们可以附加一个事件处理程序，该处理程序将侦听对任何元素的更改并相应地处理它们。[data-order-type]
$(document).on('change', '[data-order-type]', function () {
const $this = $(this);
const val = $this.val();
$this.parent().find('.blind').toggle(val === 'Other');
alert("You have Selected :: " + val);
});
添加到您的代码中，我们得到：
$.fn.duplicate = function(count, cloneEvents) {
var tmp = [];
for (var i = 0; i < count; i++) {
$.merge(tmp, this.clone(cloneEvents).get());
}
return this.pushStack(tmp);
};
//SELECT CHANGE FUNCTION (on change get value and clone)
$('#case').change(function() { // on change...
var numOfClones = $(this).val(); // get value...
$('#holder').html(''); // empty holder if there are some old clones
$('#caseNumber').duplicate(numOfClones).addClass('new').appendTo('#holder').show();
$('#caseNumber.new').each(function(idx) {
idx = $(this).index() + 1;
$('select', this).each(function() {
$(this).attr('name', $(this).attr('name') + idx).attr('id', $(this).attr('name'));
});
$('input', this).each(function() {
$(this).attr('name', $(this).attr('name') + idx).attr('id', $(this).attr('name'));
});
$('#caseNumbering', this).each(function() {
$(this).text("Case Number " + idx++);
});
});
});
$(document).on('change', '[data-order-type]', function () {
const $this = $(this);
const val = $this.val();
$this.parent().find('.blind').toggle(val === 'Other');
alert("You have Selected :: " + val);
});#holder {
border: 1px solid red;
}
.blind {
display: none;
}
.new {
border: 1px solid blue;
padding: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="case">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div id="caseNumber">
<select data-order-type name="orderType">
<option>A</option>
<option>B</option>
<option>C</option>
<option>Other</option>
</select>
<input name="OrderType">
<div class="blind">
<p>
This is hidden stuff.
</p>
</div>
</div>
<div id="holder"></div>评论
0赞
Leeya
9/7/2023
can it be $this.parent().find('#orderTypeOtherDiv').toggle(val === 'Other'); which is set to display:none. but that doesnt work
0赞
Leeya
9/7/2023
I got it working with your code $(document).on('change', '[data-order-type]', function () { if (this.value == 'Other:') { $(".orderOther").show(); } else { $(".orderOther").hide(); } }); But then Case2, case 3 also shows textfield when Other selected in Case 1. Case2 might be Commercial which should not show the textfield. Help needed.
0赞
76484
9/7/2023
@Leeya This is very difficult to troubleshoot without knowing your HTML structure. In order to limit what element is toggled to just a single clone, I was using . But your HTML may be different. If every clone begins with an element with class , then you could try: (and similarly for )..parent()new$(this).closest('.new').find('.orderOther').show().hide()
0赞
Leeya
9/7/2023
<div id="caseNumber" style="display:none;"><div class="row" style="margin-left:1px;font-weight:bold;font-size:20px;" id="caseNumbering"><br /></div> <div class="row form-group"> <div id="orderType" class="col-12 col-md-6"> @RenderOrderTypeDropdownField(formFields.Find(x => x.FieldName == "orderType-req"))</div><div class="orderOther col-12 col-md-6" id="orderTypeOtherDiv" style="display:none"> @RenderTextField(formFields.Find(x => x.FieldName == "orderTypeOther")) </div> </div>
0赞
Leeya
9/7/2023
@helper RenderOrderTypeDropdownField(FormField formField) { <label for="@formField.FieldName">@formField.FieldLabel</label> <select data-order-type name="@formField.FieldName" id="@formField.FieldName" class="@(Page.Errors.Contains(@formField.FieldName) ? "error " : "form-control ")"> <option value=""> </option> <option value="Commercial" @(fieldValue == "Commercial" ? "selected" : "")>Commercial</option> <option value="Other:" @(fieldValue == "Other:" ? "selected" : "")>Other:</option> </select>}
评论