如何获取动态创建的选择框的值

Question

我正在使用 ajax 动态创建一个 div。现在，如果 ajax 调用成功，那么我为 div 元素创建了一个字符串并将其附加到原始 div id。 这是我的代码

 $.ajax({
    type:"GET",
    url:"resources/json/asnData.json",
    dataType:"json",
    success:function(data){
        $.each(data.Payload, function(index, val){
            i=i+1;
            stmt+='<div class="row">'+
                    '<section class="col col-2">'+
                        '<label class="input"><i class="icon-append fa fa-key"></i>'+
                            '<input type="text" name="keyName" value="'+val.key+'" readonly/>'+
                        '</label>'+
                    '</section>'+
                    '<section class="col col-3">'+
                        '<label class="select">'+
                            '<select id="dataConversionType'+i+'" class="dataConversionType">'+
                                '<option value="HEX">HEX</option>'+
                                '<option value="ALL">Compare All</option>'+
                                '<option value="ASCII">ASCII</option>'+
                                '<option value="STRING">STRING</option>'+
                                '<option value="INT">INTEGER</option>'+
                                '<option value="BINT">BIG INTEGER</option>'+
                            '</select><i></i>'+
                        '</label>'+
                    '</section>'+
                    '<section class="col col-5">'+
                        '<label class="input"><i class="icon-append fa fa-dashcube "></i>'+
                            '<input id="convertedType'+i+'" type="text" value="'+val.value+'" readonly/>'+
                        '</label>'+
                    '</section>'+
         '</div>';
        });
        $(".dataParser").append(stmt);

现在有一个功能，如果有人在选择框中选择一个值，然后触发并显示。

 $('#dataConversionType'+i).change(function(e) {
            e.preventDefault();
            var conversionType=$(this).val(); //I have doubt here also..
            console.log(conversionType);
            if(conversionType == 'ALL') {
                console.log('ALL-Show a modal with each possible conversion');
            }

但这不起作用。如果我使用类名调用此函数。但是我必须使用带有 i 值的 id 调用函数，以便使用 i 值我也可以在其他字段中设置一些值。 任何帮助将不胜感激...

Answer 1

使用class代替id（用一些非动态容器替换文档）

 $(document).on('change','.dataConversionType',function(e) {
                e.preventDefault();
                var conversionType=$(this).val(); 
                console.log(conversionType);
                var index_val = $(this).attr('data-index')
                if(conversionType == 'ALL') {
                    console.log('ALL-Show a modal with each possible conversion');
                }
    )};

当你生成你的元素时，添加一个数据属性

'<select id="dataConversionType'+i+'" class="dataConversionType" data-index="'+i+'">'

此外，如果您在一个循环中，如果您想获得正确的值而不是最新的值，则需要将您的 ajax 包装在一个闭包中。

(function(idx) {
  //ajax stuff here
}(i)

Answer 2

做一件事，使用类名本身而不是 Id 来监听更改事件。 将i 的值作为自定义属性放入选择框中。在侦听器函数中，读取此属性并调用或执行您必须执行的任何操作。

示例如下：

'<section class="col col-3">'+
                    '<label class="select">'+
                        '<select id="dataConversionType'+i+'" class="dataConversionType" data-count=i>'+
                            '<option value="HEX">HEX</option>'+
                            '<option value="ALL">Compare All</option>'+
                            '<option value="ASCII">ASCII</option>'+
                            '<option value="STRING">STRING</option>'+
                            '<option value="INT">INTEGER</option>'+
                            '<option value="BINT">BIG INTEGER</option>'+
                        '</select><i></i>'+
                    '</label>'+
                '</section>'

事件监听器：-

$('.dataConversionType').change(function(e) {
        e.preventDefault();
        var conversionType=$(this).val(); //selected value
        var valueofI = $(this).attr("data-count");// Value of i

}

data-count 是自定义属性。

Answer 3

尝试改变方法

$(document).on('change','.dataConversionType',function(e) {
 // Paste Your Code
});
OR
$(document).on('change','#dataConversionType',function(e) {
 // Paste Your Code
});

Answer 4

$('#dataConversionType1').change(function(e) {alert("Changed")});

此代码不适用于动态附加选择框。 你应该试试-

  $(document).on("change","#dataConversionType1",function(){
alert($('#dataConversionType1 option:selected').val());
});

这对我有用。

Answer 5

i 的值现在已更改为最新的值，无论如何这不会给你所有的选择框。

如果您想具体说明任何选择框，请执行以下操作：

$('#dataConversionType1').change(function(e) {
   // code here
});

如果你想对你创建的所有选择框做一些事情，你可以这样做：

$('[id^="dataConversionType"]').change(function (e) {
    // Find the index: Count of i
    var elmIndex = $(this).attr("id").replace("dataConversionType", ""); 

    // Reflects the value of it in related input field
    $("#convertedType3" + elmIndex).val($(this).val());
});

如果以后想使用i的值进行操作，可以通过2种方式实现：

1. 在一些data- 属性中设置i 的值，例如：data-index=i（示例如下）：

   '<select id="dataConversionType'+i+'" class="dataConversionType" data-index="' + i + '">'+

2. 从 id 本身进行拆分或正则表达式获取索引（例如：/\d/）。