Welcome to WebmasterWorld Guest from 54.196.214.35

Forum Moderators: open

Message Too Old, No Replies

Issue reading Listbox values

     
11:44 pm on Jan 5, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 3, 2010
posts: 7
votes: 0


Hello Everyone,

I am having issues reading values from a listbox. Basically, I am trying to get all the values from "PickList" box. The PickList field is filled from another list box without any issue. Below is the HTML and Javascript for the PickList issue.

HTML :-
<select name="PickList" multiple id="PickList" style="width:200px;height:200px"></select>


JS :-
var pickList = document.getElementById("PickList");
for(var i = 0; i < pickList.options.length; i++)
{
alert(pickList.options[i].value);
}


The issue is the alert message always gives blank value but loops correctly. For eg. if the PicList has 4 values, then I get 4 blank alert message but not the values..!

Can someone tell me where the issue is? Thanks in advance.
11:02 am on Jan 6, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2004
posts:198
votes: 0


How do your options look like? Do they actually have a 'value'? E.g. <option>Lorem ipsum</option> versus <option value='someValue'>Lorem ipsum</option> - that is the only explanation I see to 'blank' values.
3:02 pm on Jan 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Also, how is the PickList field "filled from another list box"?
6:12 pm on Jan 6, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 3, 2010
posts: 7
votes: 0


Thanks for the replies....

The innerHTML of the PickList looks like this after adding 2 values:

<OPTION value="">ABC</OPTION><OPTION value="">DEF</OPTION>


The values are populated from SelectList listbox...below is the code.

var selectList = document.getElementById("SelectList");
var selectIndex = selectList.selectedIndex;
var selectOptions = selectList.options;
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
var pickOLength = pickOptions.length;
if (selectIndex > -1)
{
pickOptions[pickOLength] = new Option(selectList[selectIndex].text);
pickOptions[pickOLength].value = selectList[selectIndex].value;
selectOptions[selectIndex] = null;
}
6:18 pm on Jan 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Instead of this:

pickOptions[pickOLength] = new Option(selectList[selectIndex].text);
pickOptions[pickOLength].value = selectList[selectIndex].value;

Try doing this:


pickOptions[pickOLength] = new Option(selectList[selectIndex].text, selectList[selectIndex].value);
6:27 pm on Jan 6, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 3, 2010
posts: 7
votes: 0


Still same result..!

<OPTION value="">ABC</OPTION>