/    Sign up×
Community /Pin to ProfileBookmark

Append options at listbox dynamically

Hello all,

I’ve the following HTML code along with Javascript file. When I select any option in listbox 1, listbox 2 is populated with associated values. This implementation is more of dependent listboxes.

Please help me out of how to insert ‘ALL’ at the top of options in the listbox2.

Thanks in advance…

[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html><head>
</head>
<body bgcolor=”#E5F3F9″ text=”black” style=”margin-top: 0; font-family: ;”>
<table border=”0″ cellspacing=”0″><tr>
<td><table>
<tr><td align=right><font size=”2″>Company:</font></td><td nowrap><font size=”2″><select name=”reccomsel” id=”reccomsel” style=”width:563″ onChange=”populate(this)”>
<option value=””><option value=ALL>ALL</option>
<option value=”YEMYYCO”>&quot;Y&quot; [YEMYYCO]
<option value=”BRABTCO”>14 Brasil Telecom Celular S.A. [BRABTCO]
<option value=”AILTDCO”>Aces Thailand [AILTDCO]
<option value=”ZWEN3CO”>ZAO SONIC DUO [ZWEN3CO]
</select></td></tr>
<tr><td align=right><font size=”2″>Partner:</font></td><td nowrap><font size=”2″><select name=”paycomsel” id=”paycomsel” style=”width:563″>
<option value=””><option value=ALL>ALL</option>
<option value=”YEMYYCO”> &quot;Y&quot; [YEMYYCO]
<option value=”BRABTCO”> 14 Brasil Telecom Celular S.A. [BRABTCO]
<option value=”AILTDCO”> Aces Thailand [AILTDCO]
<option value=”AILIDCO”> ACeS_Indonesia PSN [AILIDCO]
<option value=”SDNVCCO”> Vivacell Southern Sudan [SDNVCCO]
</select></td></tr>
</table></td>
</table>
<script type=”text/javascript” src=”TCO.js”></script>
</body></html>
[/code]

[CODE]function MoveFrom()
{
from=document.getElementById(‘reccomsel’).options;
to=document.getElementById(‘paycomsel’);
to.options.length=0;
for (var zxc0=0;zxc0<from.length;zxc0++){
to.appendChild(from[zxc0].cloneNode(true));
}
}

function populate(o) {
d=document.getElementById(‘paycomsel’);
r=document.getElementById(‘reccomsel’);
e=document.getElementById(‘paycom’);

//d.options.text = ”;
//e.value = ”;

if(!d){return;}

if(r.value == “” || r.value == “ALL”){
var values = MoveFrom();
return values;
}

var myHash = {
YEMYYCO: [[”, ”], [‘CYPSCCO’, ‘Areeba LTD – GSM 900/1800 – CYPRUS[CYPSCCO]’], [‘GRCSHCO’, ‘WIND HELLAS TELECOMMUNICATIONS S.A[GRCSHCO]’]],
BRABTCO: [[”, ”], [‘PERTMCO’, ‘America Movil Peru S.A.C (Claro)[PERTMCO]’], [‘ESPATCO’, ‘Vodafone Espana S.A.[ESPATCO]’]],
AILTDCO: [[”, ”], [‘BRABTCO’, ’14 Brasil Telecom Celular S.A.[BRABTCO]’], [‘TZACTCO’, ‘Zain Tanzania[TZACTCO]’]],
AILIDCO: [[”, ”], [‘MWICTCO’, ‘Celtel Malawi[MWICTCO]’], [‘GHAGTCO’, ‘Vodafone Ghana[GHAGTCO]’]],
ZWEN3CO: [[”, ”], [‘USACGCO’, ‘AT&T Mobility LLC[USACGCO]’], [‘ZMBCZCO’, ‘Zambia Telecommunications Company Ltd (Z[ZMBCZCO]’]]
};

d.options.length=0;

//cur=mitems[o.options[o.selectedIndex].value];
if (o.name == ‘reccomsel’) {
selValue = o.options[o.selectedIndex].value;
}
else {
selValue = o.value;
}

cur = myHash[selValue];

if(!cur){return;}

//document.getElementById(‘paycomsel’).appendChild(“ALL”);

d.options.length=cur.length;

for(var i=0;i<cur.length;i++) {
for(var j=0;j<=1;j++) {
if ( j == 0)
{
d.options[i].value=cur[i][j];
if (d.options.length == 2 )
{
d.options[i].selected = true;
d.options[i].text=cur[i][j];

if (d.options[i].text != null)
{
e.value = d.options[i].text;
}
}
} else {
d.options[i].text=cur[i][j];
}
}
}
addElementBefore(document.getElementById(‘paycomsel’),”,’paycomsel’,’Before 3′);
}

function addElementBefore(node,tag,id,htm)
{
var ne = document.createElement(tag);
if(id) ne.id = id;
if(htm) ne.innerHTML = htm;
node.parentNode.insertBefore(ne,node);
}
[/CODE]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @KalyanRaj spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...