Populating an ASP.NET label with a selection made from a ListBox using a client script. (JavaScript, etc.)

Posted on 2014-11-06
Medium Priority
Last Modified: 2014-11-06
I have a label called Label1 and a Listbox called ListBox1 on an ASP.NET web form.
I am populating Listbox1 with 4 options on the page load event in my code behind.
When the selection in Listbox1 changes, I want this change to be reflected in Label1 by assigning the text value of Label1 to the selection.
I want this action to be performed on the client side only.

Question by:Mike Miller
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 82

Expert Comment

ID: 40427676
with firefox, do a right on your Listbox1, choose inspect element and post the HTML for this listbox1 here.
else just post the whole body part.

Author Comment

by:Mike Miller
ID: 40427682
How about I just post my code so far...

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test2.aspx.vb" Inherits="Diamond_Group.test2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <form id="form1" runat="server">
        <asp:Label ID="Label1" runat="server" Text="blahblah"></asp:Label>
        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
        <br />

Open in new window

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            ListBox1.Items.Add("option 1")
            ListBox1.Items.Add("option 2")
            ListBox1.Items.Add("option 3")
            ListBox1.Items.Add("option 4")
            ListBox1.Items.Add("option 5")
            ListBox1.Items.Add("option 6")
        End If
    End Sub

Open in new window

LVL 82

Expert Comment

ID: 40427685
hmmm my comment was clear : with firefox, do a right on your Listbox1, choose inspect element
you can use chrome too or a recent internet explorer
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Author Comment

by:Mike Miller
ID: 40427687
<select size="4" name="ListBox1" id="ListBox1">
      <option value="option 1">option 1</option>
      <option value="option 2">option 2</option>
      <option value="option 3">option 3</option>
      <option value="option 4">option 4</option>
      <option value="option 5">option 5</option>
      <option value="option 6">option 6</option>

LVL 82

Accepted Solution

leakim971 earned 2000 total points
ID: 40427693
Test pages :
window.onload = function() {
    document.getElementById("ListBox1").onchange = function() {
//        document.getElementById("label1").innerHTML = this.value;
        document.getElementById("label1").innerHTML = this.options[this.selectedIndex].text;

Open in new window


Author Closing Comment

by:Mike Miller
ID: 40427699
Perfect, thank you.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question