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

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

使用类而不是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

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的值进行操作，则可以通过以下两种方式进行操作：

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

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

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

Answer 4

尝试更改方法

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

Answer 5

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

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

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

这对我有用。