基于下拉框数值克隆表单后，如何获取克隆下拉框值并显示Div

已实现根据下拉框选中数值克隆表单的功能，克隆后的select和input字段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());
});

由于克隆后的下拉框是动态生成的DOM元素，静态绑定的事件无法生效，需要使用事件委托来绑定事件。同时要根据下拉框的ID后缀关联到对应的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'));
            // 给下拉框添加自定义属性存储索引，方便后续关联Div
            $(this).data('index', idx);
        });
        $('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++);
        });
        // 克隆对应Div（假设原Div的ID是orderDiv）
        $('#orderDiv').clone().attr('id', 'orderDiv' + idx).appendTo($(this)).hide();
    });
});

// 使用事件委托绑定所有克隆下拉框的change事件
$('#holder').on('change', 'select[id^="orderType-req"]', function() {
    var selectedValue = $(this).val();
    var index = $(this).data('index'); // 从自定义属性获取索引
    // 也可通过正则提取ID中的数字：var index = $(this).attr('id').match(/\d+/)[0];
    
    // 根据选中值控制对应Div的显示
    var targetDiv = $('#orderDiv' + index);
    if (selectedValue === '需要显示的条件值') { // 替换成你的实际判断条件
        targetDiv.show();
    } else {
        targetDiv.hide();
    }
    
    // 可选：弹出选中值验证
    alert("你选择了 :: " + selectedValue);
});

关键说明 #

1. 事件委托：将change事件绑定到静态存在的父容器#holder上，监听所有ID以orderType-req开头的select元素，确保动态克隆的元素也能触发事件。
2. 关联对应Div：
   • 克隆表单时同步克隆目标Div，并给Div添加对应数字后缀（如orderDiv1、orderDiv2）。
   • 通过自定义属性data-index存储索引，或者从下拉框ID中提取数字，快速匹配到对应的Div。
3. 显示逻辑：根据下拉框选中的值，判断是否显示对应的Div，替换'需要显示的条件值'为你的实际业务判断条件（比如某个选项的具体value值）。

内容的提问来源于stack exchange，提问作者Leeya