CODEWITHSUNDEEP
javascriptjquery
John Hascall
John Hascall

Reputation: 9416

How to do delayed select option generation

I have some web pages which display a number of (up to several dozen) work items. Each work item is a form consisting of several fields, two of which are large selects (one about 350 items and the other about 650 options) which are always identical other than the initially selected item.

The page can be pretty slow to load. Some of this may be due to the 24KB + 52KB of html for each copy of those selects, and I'm betting a fair amount of it is the time for the browser to build what is essentially the same huge chunk of (mostly of no interest) DOM over and over again.

What I'm thinking might be better is to just keep a master copy of the options for each in an array and just start each select out with only a single option (the initially selected value), For example:

<form ...>
  <input ...>
  <select class='dept_select' id='dept' name='dept' size='1'>
    <option value='12345' selected>Department of Banking and Finance
  </select>
  <select class='approver_select' id='approver' name='approver' size='1'>
    <option value='jpflat' selected>J. Pierpont Flathead
  </select>
</form>

and then when the user clicks on the one selectbox they are interested in, build the rest of it from the array. Is this at all sensible, and if it might be, is there some clever and succinct way to do this in jQuery or am I going to have to invent it from whole cloth and raw JavaScript? FWIW, there's no real correlation between the selects (e.g., like selecting a state limits the valid choices for selecting a city).

Upvotes: 0

Views: 426

Answers (2)

John Hascall
John Hascall

Reputation: 9416

Well, turns out it wasn't as hard as I was imagining it...

<form ...>
<select id="ts" name="ts" size="1" class="tsc">
<option value="12345" selected>This is the initial value</option>
</select>
</form>

and:

var arr = [
{V:'alpha',T:'One'},
{V:'bravo',T:'Two'},
{V:'charlie',T:'Three'}
];
$(function() {
        $( '.tsc' ).mousedown(function() {
                var sel = $(this);
                sel.unbind('mousedown');
                $(arr).each(function() {
                        sel.append($('<option>')
                                .attr('value', this.V)
                                .text(this.T));
                });
        });
});

jQuery rocks.

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

I'm not going to post code so far. I recommend to re-build your concept a bit to get to a simpler structure:

  • A user can only edit one item at a time. There's no need to generate "a couple of dozen forms", as long as no edit action is taken.
  • render the items as a simple two-dimensional array with rows and fields, preferable in a JSON
  • built the table of items dynamically in the client by use of jQuery
  • if the user wants to edit an item, open a div layer, render a form into it by the use of the above array. Of course with just one single set of these dropdowns.
  • consider to load these dropdowns on request by AJAX or use some "combo box" features like in jQuery ui (below).
  • on "save" submit the form and close the div layer

There are certain containers and dialogs ready-to-use in jQuery ui to achieve this. The result will be

  • more generic code
  • less html overhead
  • better usability even

Upvotes: 1

Related Questions