Question

I have a select looking like this:

    <select name="rowKey_1" id="rowTopic_1">
        <option value="00">Topic 1</option>
    </select>

I have many of these in a grid on a table.

What I would like is for when the user clicks on the select arrow I would like jQuery to trigger and then have code that calls a URL and retieves new options. Then I would like to have the one option replaced with my new long option list.

I can code the ajax request but how can I code the jQuery that senses the trigger clicked and then how can I code the jQuery that replaces the options with new options?

Answer 1

//When the #rowTopic_1 element is clicked
$("#rowTopic_1").click(function() {

  //Cache the element
  $this = $(this);

  //Load new content
  $.ajax({
    url: "yoururl",
    type: "POST",
    success: function(data) {
      //Remove the old content and replace with the returned data
      $this.empty().append(data);
    }
  });

});

For this to work you will need to use a server side language to return html to the page in the format <option value="00">Foo</option>