best way to dynamically populate dropdown options

Question

What's the best way to dynamically populate dropdown options in jqgrid advanced searching?

1) The first way: use "dataUrl" option of "searchoptions"

Disadvantage: when user add new criteria, and choose the attribute, dataUrl was posted to the server, when user add the same criteria again, dataUrl was posted to the server again, and with twice. very strange.

Advantage: the values user selected previously was there and not cleared.

2) The second way: use "dataInit" option of "searchoptions"

Disadvantage: the values user selected previously was cleared when adding new criteria(can not accepted, because it is not user-friendly, please refer url: the selected value was cleared in dropdown after add new criteria in jqgrid advanced searching)

Advantage: data was loaded into page when the page refreshed and only once.

3) the third way, use "value" option of "searchoptions"

but it's not dynamically, just hard-coded in page.

Could any one share the best practice about the issues. thanks.

Answer 1

I start with the second option. I suppose that you use dataInit in the wrong way. The goal of dataInit to initialize the control, like convert <select> to select2 or set jQuery UI Autocomplete or jQuery UI Datepicker on text input element. One should not fill the control with values. The select control is already created and filled before calling of dataInit.

If one use the first option, one can set HTTP cache header to prevent multiple request to dataUrl.

About the last option: one can set searchoptions.value dynamically inside of beforeProcessing for example. See the answer, this one and this one.