Cant add values in listbox from client side.

Question

1.00/5 (1 vote)

See more:

How to add values in list box from client (javascript and jquery).

What I have tried:

I tried both js and jq , but both not working,
my code in JQ

JavaScript

var value = 'aravind';
var listBox = $("lstProfLstS1");
var option = $("<option />").val(value).html(value);
listBox.append(option);
return false;

my code in JS

JavaScript

var Val1='aravind';
var opt1 = document.createElement("option");
opt1.innerHTML = Val1.replace(/ /g, "\xA0");
opt1.value = Val1;
document.getElementById("lstProfLstS1").options.add(opt1);

Regards,
Aravind

Posted 26-Feb-19 21:02pm

Aravindba

Updated 26-Feb-19 23:00pm

Add a Solution

Comments

CHill60 27-Feb-19 3:29am

"but both not working," - what is actually happening?

Aravindba 27-Feb-19 4:02am

values not added in listbox,means listbox is empty

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CHill60 · Answer 1 · 2019-02-26T23:01:00

Solution 2

Now we know this is an ASP control, see Karthik's comment "you won't be able to get the client side added values in the server side (Post back)

However, if you want to access the items in the code behind then use a hidden field to capture the items that are added client side. You can then query that hidden field server side.

Edit - I've found this worked example[^]

Posted 26-Feb-19 23:01pm

CHill60

Updated 26-Feb-19 23:07pm

v2

Comments

Aravindba 27-Feb-19 5:32am

yes correct we get values in hidden fields.

Karthik_Mahalingam · Answer 2 · 2019-02-26T21:48:00

Solution 1

Checkout these
Using JS

<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
    <select id="lstProfLstS1" ></select> 
    <script>
        var Val1 = 'aravind';
        var opt1 = document.createElement("option");
        opt1.text = Val1;
        opt1.value = Val1;
        document.getElementById("lstProfLstS1").options.add(opt1); 
    </script>
  
</body>
</html>

Using JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
    <script>
        $(function () {
            var value = 'aravind';
            var listBox = $("#lstProfLstS1");
            var option = $("<option />").val(value).text(value);
            listBox.append(option); 
        });
    </script>
</head>
<body>
    <select id="lstProfLstS1"></select>
    

</body>
</html>

Posted 26-Feb-19 21:48pm

Karthik_Mahalingam

Comments

Aravindba 27-Feb-19 4:03am

hi this is my control
<asp:ListBox ID="lstProfLstS1" Width="100%" Height="200px" runat="server">

Karthik_Mahalingam 27-Feb-19 4:12am

if it is a asp control, you wont be able to get the client side added values in the server side ( Post back)

Aravindba 27-Feb-19 5:32am

hi we added value in hidden field and used in server side, below mention CHill60 is correct, we did like that.my problem in only not display in listbox when add, but we can store values,bcz i store in hidden field.

Karthik_Mahalingam 27-Feb-19 6:17am

are you using masterpage? if so use like this
document.getElementById('# <%= lstProfLstS1.ClientID %>');
refer this https://www.dotnetodyssey.com/2014/12/24/get-id-asp-net-server-control-using-javascript-jquery/

Aravindba 27-Feb-19 22:35pm

no, i am not using master page,if problem in getting control id it show undefined error, but my code it append values (document.getElementById("lstProfLstS1").options.add(opt1)) and also next line i put return false also.

Karthik_Mahalingam 27-Feb-19 22:51pm

ok then what is the issue ?
still you are not able to add items to the list box using JS ?

Karthik_Mahalingam 27-Feb-19 22:54pm

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aaa.aspx.cs" Inherits="aaa" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ListBox ID="lstProfLstS1" Width="100%" Height="200px" runat="server" >
       
    </asp:ListBox>

    </div>


         <script>
             var Val1 = 'aravind';
             var opt1 = document.createElement("option");
             opt1.text = Val1;
             opt1.value = Val1;
             document.getElementById("lstProfLstS1").options.add(opt1);
    </script>

    </form>
</body>
</html>