Search code examples
javascriptjqueryprime-ui

How can I get tagetData from pickList in PrimeUI?


I am trying to retrieve the target data from PrimeUI pickList, but with no success. Maybe someone with good knowledges in jQuery can help me. Well, I think my problem is simple. I successfully implemented the pickList from PrimeUI, but I don't know and I can't retrieve the target data from the pickList.

Well, let me show some code. My javascript looks like this:

<script>
    $(document).ready(function() {
       var mySourceData = [{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}];
       var myTargetData = new Array();

       $('#myPickList').puipicklist({
           filter: true,
           dragdrop: true,
           filterMatchMode: 'contains',
           sourceData: mySourceData,
           targetData: myTargetData
       });

       $('#myPickListSaveButton').click(function(){
           //How to retrieve #myPickList target data?
       });
    }
</script>

My HTML:

<div id="atividadesPicklist">
    <select name="source"></select>
    <select name="target"></select>
</div>

Like I wrote inside the #myPickListSaveButton function, how can I retrieve the value from targetData?

Thanks.


Solution

  • The plugin will move the options to the target select, meaning you can simply get the options from that select

    $('#myPickListSaveButton').click(function () {
         var targetData = $.map($('select[name=target] option'), function (v) {
              return v.value; // maps the values and returns them in an array ["1", "2"]
         });
         console.log(targetData); 
    });
    

    Example