[RESOLVED]How to show initial value

In my page I’ve 10 dropdownlists and I bind this dropdown items using jquery ajax call when the page in loading/ready. Now I want to show the initial selected value in a separate label for every dropdownlist when page load complete and when I changed the
dropdownlist items it show the selected items. How I am suppose to do this. 

Can anyone help me please. Thanks in advance.


you can try something like following.

$(document).ready(function() {


Hi friend,

you can try something lik this

$(document).ready(function() {

-- After all your ajax function --
var ddlVal = $("#yourdropdownid option:selected").text();

document.getElementById("yourlabelid").innerHTML = ddlVal;


var afterselddlVal = $("#yourdropdownid option:selected").text();
document.getElementById("yourlabelid").innerHTML = afterselddlVal;

Try Following updated code to show value in label,

<!DOCTYPE html>
<title>Drop down default select</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<select name="select1" id="select12" multiple="multiple"> 
<option selected="selected">Option2</option> 
 <label id="selectedValue" name="selectedValue">Selected Value: </label>
$("#select12").change(function ()
var str = "";   
$("#select12 option:selected" ).each(function()
  str += $( this ).text() + " ";   
 $('#selectedValue').text("Selected Value :"+str);}).change();

Document is not ready if you added the javascript before the elements in the DOM, you need to use a DOM ready function or javascript after the elements.





You could do something like below

On success of the AJAX call, call a function which set the label to the selected value of the drop down lists. Call the same function onchange of the dropdownlists as well. The below code is not tested but hope you get the idea

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="ForumTest.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        $(function () {
//Rest of the AJAX call here success: function () { for (i = 1; i < 11; i++) setLable(i); } }); for (i = 1; i < 11; i++) { $("#DropDownList" + i).onchange(function () { setLable(i) }); } }); function setLable(id) { $("#label" + id).html($("#DropDownList" + id + " :selected").text()); } </script> </head> <body> <form id="form1" runat="server"> <label id="label1"></label> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> <label id="label2"></label> <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> <label id="label3"></label> <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList> <label id="label4"></label> <asp:DropDownList ID="DropDownList4" runat="server"></asp:DropDownList> <label id="label5"></label> <asp:DropDownList ID="DropDownList5" runat="server"></asp:DropDownList> <label id="label6"></label> <asp:DropDownList ID="DropDownList6" runat="server"></asp:DropDownList> <label id="label7"></label> <asp:DropDownList ID="DropDownList7" runat="server"></asp:DropDownList> <label id="label8"></label> <asp:DropDownList ID="DropDownList8" runat="server"></asp:DropDownList> <label id="label9"></label> <asp:DropDownList ID="DropDownList9" runat="server"></asp:DropDownList> <label id="label10"></label> <asp:DropDownList ID="DropDownList10" runat="server"></asp:DropDownList> </form> </body> </html>

Leave a Reply