CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Subho
Subho

Reputation: 923

how to get the value of dynamically created selectbox

I am creating a div dynamically with ajax. Now if the ajax call is success then i created a string for div element and append it to the original div id. here is my code

 $.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);

Now there is function where if someone select a value in selectbox then fire and show.

 $('#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');
            }

but this is not working. this function works if I called using the class name. But i have to call the function using id with the i value, so that with that i value i can also set some value in other fields. any help will be appreciated...

Upvotes: 0

Views: 94

Answers (5)

Ashish Kumar
Ashish Kumar

Reputation: 3039

The value of i has been now changed to the latest one and this would not give you all the selectboxes anyways.

If you want to be specific about any select box, do it like:

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

If you want to do something on all the selectboxes you have created, you can do it like:

$('[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());
});

If you want to use the value of i later for operations, you can do it in 2 ways:

  1. set the value of i in some data- attribute like: data-index=i (example below):

    '&lt;select id="dataConversionType'+i+'" class="dataConversionType" data-index="' + i + '">'+

  2. Get the index from the id itself doing split or regex (example: /\d/).

Upvotes: 0

Rahul patel
Rahul patel

Reputation: 1

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

this code will not work for dynamically append select box. you should try-

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

This works for me.

Upvotes: 0

DsRaj
DsRaj

Reputation: 2328

Try On change method

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

Upvotes: 0

Anupam
Anupam

Reputation: 8016

Use class instead of id (replace document with some non dynamic container) 

 $(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');
                }
    )};

And when you are generating your element add a data attribute

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

Also if you are inside a loop you need to wrap your ajax within a closure if you want to get correct value and not the latest one.

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

Upvotes: 2

Sabith
Sabith

Reputation: 1656

Do one thing, Listen to the change event using class name itself, instead of Id. Put value of i as a custom attribute into the select box. In the listener function, read this attribute and call or perform whatever actions you have to do.

A sample is as below:

'<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>'

Event listener:-

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

}

data-count is the custom attribute.

Upvotes: 1

Related Questions