填充JScript数组以在SELECT上重用

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?

Answer 1

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:

1. query datasource to get array of select questions
2. build HTML of selects
3. append HTML to page
4. attach change event listener to selects
5. 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:

Example select value changed: