Get dynamic value

Question

function GetItemsFromTheList()
{
var query = new SP.CamlQuery();
var textCAML = "<View><Query><Where><Eq><FieldRef Name='Ansvarig' /><Value Type='Text'>" + user.get_title() + "</Value></Eq></Where></Query></View>";

query.set_viewXml(textCAML);
var items = TidRapportering.getItems(query);
clientContext.load(items);
clientContext.executeQueryAsync(onSuccess, onFail);
 function onSuccess() {
    var listString = "";
    var enumerator = items.getEnumerator();
    while (enumerator.moveNext()) {
        var currentItem = enumerator.get_current();
        listString +="<br/> " + "Projekt namn: " + currentItem.get_item('Title') +
            "<br/> " + "Användaren:" + currentItem.get_item('Name') +
            "<br/> " + "Antal timmar per projekt: " + currentItem.get_item('AntalProjekt') +
            "<br/> " + "Vecko nummer : " + currentItem.get_item('Veckonr') +
            "<br/> " + "Status: " + currentItem.get_item('Status') +   
            "<br/> " + '<select id="ddStatus"><option >Skapad</option><option >Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>' +
            '<button type="button" onclick="alert()">Ändra status</button>' +
            "<br/> " + '<span id="lblStatus" class="label label-info"></span>' + 
            "<br/> ";
    }
    $('#divAnsokningar').html(listString);
}
}
function onFail(sender, args) {
    alert('Error:' + args.get_message());
}
}
function alert() {
jQuery('#btnStatus').on("click", function() {
    var selectedText = jQuery("#ddStatus option:selected").text();
    jQuery('#lblStatus').html(selectedText);
})
}

Any one can help me with getting dynamic dropdown list selected text and set it in the dynamic label by clicking on the dynamic button. I want to update currentItem.get_item('Status') in the my list (Tidrapportering) to the one of the ddStatus selected text

Answer 1

You can do this two ways

1. Define a Click Event on HTML Markup as below

   listString += "<br/> " + '<select id="ddStatus"><option >Skapad</option><option >Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>' +
           '<button id="btnStatus" type="button" onclick="PopulateLabel()">Ändra status</button>' +
           "<br/> " + '<span id="lblStatus" class="label label-info"></span>' + 
           "<br/> ";
   
   function PopulateLabel() {
     var selectedText = jQuery("#ddStatus option:selected").text();
     jQuery('#lblStatus').html(selectedText);
   }
   

2. Using jQuery ON method

   jQuery(document).ready(function(){
       jQuery('#btnStatus').on("click", function() {
           var selectedText = jQuery("#ddStatus option:selected").text();
           jQuery('#lblStatus').html(selectedText);
       });
   });
   

Update

listString +="<br/> " + "Projekt namn: " + currentItem.get_item('Title') +
            "<br/> " + "Användaren:" + currentItem.get_item('Name') +
            "<br/> " + "Antal timmar per projekt: " + currentItem.get_item('AntalProjekt') +
            "<br/> " + "Vecko nummer : " + currentItem.get_item('Veckonr') +
            "<br/> " + "Status: " + currentItem.get_item('Status'); +
            "<br/> " +

if(currentItem.get_item('Status') == "Skapad") 
    listString += '<select id="ddStatus"><option selected>Skapad</option><option >Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>'
else if(currentItem.get_item('Status') == "Behandlar") 
    listString += '<select id="ddStatus"><option >Skapad</option><option selected>Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>'
else if(currentItem.get_item('Status') == "Avslagen") 
    listString += '<select id="ddStatus"><option >Skapad</option><option >Behandlar</option><option selected>Avslagen</option><option >Biviljad</option></select>'
else if(currentItem.get_item('Status') == "Biviljad") 
    listString += '<select id="ddStatus"><option>Skapad</option><option>Behandlar</option><option>Avslagen</option><option selected>Biviljad</option></select>'
else 
    listString += '<select id="ddStatus"><option>Skapad</option><option >Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>'

    listString += "<br/> " + '<select tag="' + currentItem.get_id() + '"><option >Skapad</option><option >Behandlar</option><option >Avslagen</option><option >Biviljad</option></select>' +
        '<button class="btnStatus" tag="' + currentItem.get_id() + '" type="button" onclick="PopulateLabel()">Ändra status</button>' +
        "<br/> " + '<span class="label label-info" tag="' + currentItem.get_id() + '"></span>' + 
        "<br/> ";



jQuery(document).ready(function(){
    jQuery('.btnStatus').on("click", function() {
        var selectedText = jQuery("select[tag='" + jQuery(this).attr(tag) + "'] option:selected").text();
        jQuery('span[tag="' + jQuery(this).attr(tag) + '"]').html(selectedText);
    });
});