Processing delimited list then adding to listbox in java script

B

Brian Henry

I haven't worked with java script much, I know how to do this server side by
constant post backs to the server on a webform, but it seems like i should
be able to do this client side also...

What happens is a modal dialog recieves a listing of users in a semi-colon
delimited list so its like this

user_1;user_2;user3;user_4;

what I need to do is split this up in javascript and place each user into a
listbox on the client side, how would i go about doing that? thanks
 
S

Steven Cheng[MSFT]

Hi Brian,

From your description, you'd like to split a string into an array in
javascript code and dynamically create some items of
a html listbox according to the values in the array via javascript , yes?

As for this problem, here are my suggestions:
1. The string spliting can be done by the split() member function of the
text object, for example

var txt = "user1;user2;user3";
var array = txt.split(";");

2. And as for dynamically create option items for listbox( infact it is a
<select> html element), we can use the following code:

//modelSelect is an <select > html element

modelSelect.options.length = 0; // Clear the popup

modelSelect.options[0] = new Option("Explorer");
modelSelect.options[1] = new Option("Mustang");
modelSelect.options[2] = new Option("Probe");

And here is a web tech article discussing this:
#Focus on JavaScript --- Modifying Items in a Dropdown List
http://javascript.about.com/library/weekly/aa072903a.htm

In addition, here a simple demo page , you may also have a look if you feel
anything unclear:
====================================
<HTML>
<HEAD>
<title>jslistbox</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function setUsers()
{
var txt = document.getElementById("txtUsers").value;
var lst = document.getElementById("lstUsers");

if(txt != null && txt.length != 0)
{
var arr_users = txt.split(";");
lst.options.length = 0;

var i=0;
for(i=0;i<arr_users.length;i++)
{
lst.options = new Option(arr_users);
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<SELECT size="5" id="lstUsers">
<OPTION></OPTION>
</SELECT>
</td>
</tr>
<tr>
<td><INPUT type="text" id="txtUsers"></td>
</tr>
<tr>
<td><INPUT id="btnSetUsers" type="button" value="Set Users"
onclick="setUsers()"></td>
</tr>
</table>
</form>
</body>
</HTML>
=============================================

Hope these help. Thanks.


Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top