+ Start a Discussion
JaydipJaydip 

VisualForce and Java script issue with multi-pick list

Hello,

 

I am calling a java script from VF page and passing field ID value to java script as parameter.  Now, when I do a 

document.getElementById(theId).value for a multi-pick list, the java script only getting the first value selected. My thought was, it should get semi colon delimited string with all values. So, how could we get all other selected values in java script?

 

Thanks for any help.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
Pradeep_NavatarPradeep_Navatar

Go through the sample code given below :

 

            var SelecOptionsStr = '';

            var selectList = document.getElementById('theId'); // Id of the multi select picklist

            for(var i = 0; i < selectList.options.length; i++)

            {

                        var opt = selectOptions[i];

                        if(opt.selected)

                        {

                                    if(i = 0)

                                    {

                                                SelecOptionsStr = selectList.options[i].text;

                                    }

                                    else

                                    {

                                                SelecOptionsStr = SelecOptionsStr + ';' + selectList.options[i].text;

                                    }

                        }

             }

 

Hope this helps.

All Answers

bob_buzzardbob_buzzard

This is standard HTML/JavaScript functionality rather than visualforce.  When you have an HTML select element that can have multiple selected items, you have to iterate the select options and check if each one is selected.

 

Assuming you have pulled back the element into the variable myElement, you need something like the following:

 

 

for (var i = 0; i < myElement.options.length; i++)
{
  if (myElement.options[ i ].selected)
  {
     // do stuff here,
  }
}

 

 

JaydipJaydip

Thank you so much for your response.

I tried, but getting java script error as "Options.lenght is null or not an object".  Here is what I am doing. I am passing parameter from VF field as

 

onclick="myjavascriptfunction('{!$Component.pgblksec.secitm.fldid}')

//field with id fldid is a multi pick list

and in script part I have below code:

// I am trying to build a semi colom delimited string with all selected values.

myjavascriptfunction (inputvar) {

 

var valSelected=document.getElementById(inputvar).value;

var strPrdSel='-';

 

for (var i=0; i < valSelected.options.length; i++) {

 

if (valSelected.options[i].Selected) {

if (strPrdSel=='-') {

strPrdSel = valSelected.options[i].Selected;

}

else {

strPrdSel = strPrdSel + ';' + valSelected.options[i].Selected;

}

}

}

 

alert (strPrdSel);

 

 

}

Thank you so much for all your help.

Pradeep_NavatarPradeep_Navatar

Go through the sample code given below :

 

            var SelecOptionsStr = '';

            var selectList = document.getElementById('theId'); // Id of the multi select picklist

            for(var i = 0; i < selectList.options.length; i++)

            {

                        var opt = selectOptions[i];

                        if(opt.selected)

                        {

                                    if(i = 0)

                                    {

                                                SelecOptionsStr = selectList.options[i].text;

                                    }

                                    else

                                    {

                                                SelecOptionsStr = SelecOptionsStr + ';' + selectList.options[i].text;

                                    }

                        }

             }

 

Hope this helps.

This was selected as the best answer
Jothi DevaRajJothi DevaRaj
var select = document.getElementById('{!$Component.Your Picklist ID}');

var SelecOptionsStr = '';


    for(var i=0; i < select.length; i++)
    {
   
        var opt =select.options[i];
       
         if(opt.selected)
         {
             if(SelecOptionsStr=='')
             {
             SelecOptionsStr = select.options[i].text;
             }
             else if(SelecOptionsStr!='')
             {
             SelecOptionsStr = SelecOptionsStr + ';' + select.options[i].text;
             }
       
         }
    }
alert(SelecOptionsStr);