Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KruviKruvi 

Populating a multi selectlist using innerHTML

Hi

 

I'n trying to populate a multi selectlist using innerHTML but I guess I'm not doing the right thing.

 

This is what I'm doing where result is an array of strings (String[])

 

 

document.getElementById("{!$Component.thePage:theform:mainBlock:resultsBlock:theResultSection:sel1}").innerHTML = result

 

Can anyone help with an example of how it should be done?

 

Many thanks

 

 

Salesforce WizardSalesforce Wizard

This is a complete guess. I haven't updated Multi-selects with JS.

 

I know that the data is stored as a semi-colon separate string. Try doing that instead of your string array. 

 

So if you want your multi-select to contain the values "Test1" and "Test2" and "Test3" you would assign the innerHtml to a value of "Test1;Test2;Test3"

 

 
KruviKruvi

Hi

 

Thanks for the advice, but it is still not working.

 

It seems I somehow have to insert an <option> into the <select> list but I'm not sure how I do it via javascript

 

Any advice?
tukmoltukmol

two ways:

 

via newer DOM approach:

var values = ["Option 1","Option 2","Option 3"];	
var sel1 = document.getElementById("{!$Component.thePage:theform:mainBlock:resultsBlock:theResultSection:sel1}");
if (sel1) {
	for (var i=0; i < values.length; i++) {
		var opt = document.createElement("option");
		opt.setAttribute("value",values[i]);
		opt.innerHTML = values[i];
		sel1.appendChild(opt);
	}
}

 

or the older Options object approach:

var values = ["Option 1","Option 2","Option 3"];	
var sel1 = document.getElementById("{!$Component.thePage:theform:mainBlock:resultsBlock:theResultSection:sel1}");
if (sel1) {
	for (var i=0; i < values.length; i++) {
		var opt = new Option(values[i]);
		sel1.options.add(opt);
	}
}

 
tukmoltukmol

or if you want to insist on using innerHTML as you originally thought...

 

var values = ["Option 1","Option 2","Option 3"];	
var html = "";
var sel1 = document.getElementById("{!$Component.thePage:theform:mainBlock:resultsBlock:theResultSection:sel1}");
if (sel1) {
	for (var i=0; i < values.length; i++) {
		html = html + "<option value='" + values[i] + "'>" + values[i] + "</option>"
	}
	sel1.innerHTML = html;
}

IE is known to have glitches/tag omission with innerHTML, so this one may be true for IE.
KruviKruvi

Thanks for the valuble tips :-)

 

I'll go and try it and see which method works best