Store javascript values in a ListBox (ASP.NET)

Question

I have a button which opens a popup window and lets me to choose something from a list and then returns to parent page with the ID and NAME variables. In the parent page, I store ID in an hidden field and NAME in a textbox. This is ok when i choose one thing from list. But now I want to choose multiple things and store ID's and NAME's in a listbox value and text property. How can I do that? These are the javascript codes I am using for textbox and hidden field.

<script type="text/javascript">
  function get_selected_machine(ID, NAME) {
      document.getElementById("txtName").value = NAME;
      document.getElementById("hdnID").value = ID;
    }
</script>

Why not just add as comma separated list to both elements?

user447356
– user447356

2011-10-04 12:52:18 +00:00
Commented Oct 4, 2011 at 12:52 — user447356
– user447356, Commented Oct 4, 2011 at 12:52

James Hill · Accepted Answer · 2011-10-04 12:49:26Z

2

Below is a very simple example that illustrates how to get the values from a listbox using pure JavaScript. How you decide to store the values on the client once you have them is up to you.

HTML:

<select id="multiSelect" size="5" multiple="multiple">
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    <option value="o4">Option 4</option>
    <option value="o5">Option 5</option>
    <option value="o6">Option 6</option>
</select>
<br />
<button id="btnGetValues" onclick="GetValues()">Get Values</button>

JavaScript

function GetValues() {
    //Get select object
    var myList = document.getElementById("multiSelect");

    //Create array to store selected values
    var aryMySelectOptions = new Array();

    //Loop through all values and grab selected
    for (var i = 0; i < myList.options.length; i++) {
        if (myList.options[i].selected) {
            aryMySelectOptions.push(new selectOption(myList.options[i].innerText, myList.options[i].value));
        }
    }

    //Loop through selected values and alert for debugging purposes
    for (var i = 0; i < aryMySelectOptions.length; i++) {
        alert("Text: " + aryMySelectOptions[i].text + ". Value: " + aryMySelectOptions[i].value + ".");
    }
}

function selectOption(text, value) {
    var text;
    var value;

    this.text = text;
    this.value = value;
}

Here's a working jsFiddle.

Note: The jsFiddle uses jQuery, but only as a means of attaching to the click event of the button. I did not use jQuery for anything else because I'm assuming that you want a pure JS solutions (you didn't tag jQuery in your post).

edited Oct 4, 2011 at 12:49

answered Oct 4, 2011 at 12:16

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

asawyer Over a year ago

I'm a little confused why you would use jQuery to attach the event, and then write these complicated loops that could be done with just another simple jQuery selector.

James Hill Over a year ago

@asawyer, I'll update the post to make it more clear. The OP requested a pure JS solutions - they didn't tag jQuery. I find it easier to put together an example in jsFiddle by attaching to the event with jQuery. Trust me, if they OP would have tagged jQuery, I would have used it to the fullest!

enginbilici Over a year ago

By the way, the data in my listbox that gets values from javascript, lose when I fire some controls in the page? Is there a solution to save the items in listbox for that situation?

James Hill Over a year ago

@enginbilici, it sounds like the page is posting back and losing the selection. It would be best to post another question. Asking additional questions in comments gets really messy.

ShaileshDev · Accepted Answer · 2015-06-23 09:10:21Z

0

It is very easy. You can use following function-

function selectCompany(text, value)
 {      
    var opt = document.createElement("option");
    document.getElementById('<% =listBoxId.ClientID %>').options.add(opt);
    opt.text = text;
    opt.value = value;
}

I hope this would have helped you.

answered Jun 23, 2015 at 9:10

ShaileshDev

1,15613 silver badges16 bronze badges

Collectives™ on Stack Overflow

Store javascript values in a ListBox (ASP.NET)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related