Nikkorian Nikkorian - 4 months ago 6
Javascript Question

jQuery behaving inconsistently when assigning "selected" attributes

I have a form to edit records from a table. I store the field values for all records of my table in javascript arrays, one array for each field. When the user selects a record to edit, I populate the form fields from the arrays.

Three of the table's fields are foreign keys, and for these I use SELECTS containing all the available records from the parent tables. Two of these FKs reference the same table.

<select name="parentselector" id="parentselector" class="cp-form-select" size="1" autofocus required>
<option id="parentselector-3" value="3">LOCAL SHIRE</option>
<option id="parentselector-6" value="6">ACCOUNTS</option>
<option id="parentselector-7" value="7">PARKS AND GARDENS</option>
<option id="parentselector-8" value="8">ROADS</option>
<option id="parentselector-9" value="9">MINOR ROADS</option>
</select>

<select name="creditselector" id="creditselector" class="cp-form-select" size="1" autofocus required>
<option id="creditselector-76" value="76">FIRST ACCOUNT</option>
<option id="creditselector-78" value="78">SECOND ACCOUNT</option>
<option id="creditselector-79" value="79">THIRD ACCOUNT</option>
</select>

<select name="debitselector" id="debitselector" class="cp-form-select" size="1" autofocus required>
<option id="debitselector-76" value="76">FIRST ACCOUNT</option>
<option id="debitselector-78" value="78">SECOND ACCOUNT</option>
<option id="debitselector-79" value="79">THIRD ACCOUNT</option>
</select>


If I use javescript to set the selected options, it works without a problem:

document.getElementById("debitselector-" + dr).selected = "true";
document.getElementById("creditselector-" + cr).selected = "true";
document.getElementById("parentselector-" + pr).selected = "true";


dr, cr, and pr are the foreign key values from my arrays.

When I use the jQuery, it's very unreliable. I have tried the following two approaches - there's no difference:

$("#debitselector option[value=" + dr + "]").attr("selected","selected");
$("#creditselector option[value=" + cr + "]").attr("selected","selected");
$("#parentselector option[value=" + pr + "]").attr("selected","selected");

$("#debitselector-" + dr).attr("selected","selected");
$("#creditselector-" + cr).attr("selected","selected");
$("#parentselector-" + pr).attr("selected","selected");


When I first load the page, the first record in the table is loaded, by default, and the SELECTS all populate correctly. If I select another record to edit, all three SELECTs again display their new values as expected. If I step through the code, I see each of the three lines of code execute. However, after that, if I select a second record to edit (and thereafter), the SELECTS don't change. When I step over the first line of code above, it appears to crash - the focus returns to the form and the SELECTS have not changed. Clearly the execution has hit an exception and dropped out. Sometimes, wierdly, next time I click on anywhere the form, the code breaks at a line deep inside filler.js which appears to be a chrome extension - I have never touched this file.

I have my fix - just use the Javascript - but I am curious if anyone could throw a light on the apparently 'flaky' jQuery behavior.

Answer

Have you tried the following approach? Simply set the select values:

  $("#debitselector").val(dr);  
  $("#creditselector").val(cr);  
  $("#parentselector").val(pr);

Should be as easy as this. Remember that vars (dr,cr,pr) must be set to an existing option value.

Do not forget to chain change() method if you still want to fire onchange event on those. Example:

  $("#debitselector").val(dr).change();