Populating JScript Array for reuse on SELECTs

Question

Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...

I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.

In other words, I have an array which contains "Yes, No, Maybe" I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item. When the user changes one of those <Select>s, an event is fired for me to write back to the database.

I know I can use the [ID=^ but don't know how to:

a) Get the page to populate the <Select> as it's created with the array b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).

Any thoughts on this?

Mike Grace · Accepted Answer · 2010-12-07 19:22:58Z

3

I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.

Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html

Example steps:

query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value

Example jQuery:

// get list of questions
$.ajax({
  url: url,
  dataType: "jsonp",
  success: function(data) {

    // build string of HTML of selects to append to page
    var selectHtml = "";
    $(data.query.results.p).each(function(index, element) {
      selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
    });

    // append HTML to page
    $(document.body).append(selectHtml);

    // bind change event to submit data
    $("select.auto").change(function() {
      var name = $(this).attr("name");
      var val = $(this).val();
      // replace the following with real submit code
      $(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
    });
  }
});

Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html

Example loaded:

alt text

Example select value changed:

alt text

answered Dec 7, 2010 at 19:22

Mike Grace

17k8 gold badges64 silver badges79 bronze badges

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

2 Comments

JasonMHirst Over a year ago

Mike this is a perfect example, thank you so much, really appreciate your input on this.

Mike Grace Over a year ago

Good to hear! Don't forget to accept the answer then and good luck!

Collectives™ on Stack Overflow

Populating JScript Array for reuse on SELECTs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related