Lose focus of select-option when rebuilding option list

Question

I am dynamically setting the options of my select-fields. Every time the form changes, new data is received from a Servlet and the current selections are overwritten.

Problem here is, that if I select an option, the form loads the javascript function, and I loose my selection / focus.

var capacityOptionsAsString = "";
for(var i = 0; i < capacityArray.length; i++) {
  capacityOptionsAsString += "<option value='" + capacityArray[i] + "'>" + capacityArray[i] + "</option>";
  console.log('capacity option: ' + capacityOptionsAsString);
}
$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));

Any idea how to keep the selection?

Edit: Maybe I was not clear enough. I want to keep the selection. So it has to be validated, if the option is selected, if it is, we have to select it again.

what do you mean by 'form loads the javascript function'? – thecodeparadox Apr 24 '12 at 09:18 — thecodeparadox, Apr 24 '12 at 09:18
$('form[name="formName"] :input').change(function() {} – nimrod Apr 24 '12 at 09:19 — nimrod, Apr 24 '12 at 09:19

PiTheNumber · Accepted Answer · 2012-04-24T09:42:20.453

0

Just set the focus again:

$("select[name='inptCapacity']").focus();

Update

get selected option:

var selected_value = $("select[name='inptCapacity'] option:selected").val()

Do your changes

$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));

Select it again:

$('select[name='inptCapacity'] option[value="' + selected_value + "]').attr('selected', 'selected');

You totally need an id for your select ;)

edited Apr 24 '12 at 09:42

answered Apr 24 '12 at 09:11

PiTheNumber

22,828
17
107
180

and how do I find out if the focus is currently set? – nimrod Apr 24 '12 at 09:12
`$("select[name='inptCapacity']").is(":focus")` http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus – PiTheNumber Apr 24 '12 at 09:13
@dooonot `$(...).is(':focus')` – gdoron Apr 24 '12 at 09:13
Sorry guys, seems like we mix focus and select. I need to know which option is selected. – nimrod Apr 24 '12 at 09:20
Can you tell me how this should be integrated into my example above? I think we need to compare the values of the selected option with the value in the for-loop and if it is equal, we set it as selected? – nimrod Apr 24 '12 at 09:36
Thanks a lot PiTheNumber, much appreciate it! – nimrod Apr 24 '12 at 11:27
1

No problem. By the way @doonot.com: Tiny font, but nice webpage! I like the design. – PiTheNumber Apr 24 '12 at 12:31

thecodeparadox · Answer 2 · 2012-04-24T09:22:01.283

0

$('select[name="inptCapacity"]').is(':focus');

$('form[name="formName"] :input').change(function() {

   // keep the select focus always on input change

   $('select[name="inptCapacity"]').focus(); 

});

edited Apr 24 '12 at 09:22

answered Apr 24 '12 at 09:16

thecodeparadox

86,271
21
138
164

Lose focus of select-option when rebuilding option list

2 Answers2