jquery set select option has no effect on the html

Question

I have this html

<select name="grid.SprintModel" id="grid_SprintModel">
  <option value="">&lt;None&gt;</option>
  <option value="739af096-a732-49ea-b9fc-d9220a25ed36">1. Meilenstein: Spezifikation</option>
  <option value="94749a48-fe3b-4f03-8757-4b07257f6c18">2. Meilenstein: Test</option>
  <option value="775efd45-b90f-43f9-84e6-6eb7cf1f05d7">3. Meilenstein: Qualitätsrelease</option>
</select>

Then I have this jquery

function onConfigureSprintSelection() {
    // find the dropdown first
    var $dropdown = $('select[name$=grid.SprintModel]');
    $('<option/>', { text: '<None>', value: '' })
        .prependTo($dropdown);
    // find the table row (tr) which is being edited
    var $tr = $dropdown.closest('tr:has(form)');

    // get the grid client object
    var grid = $tr.closest('.t-grid').data('tGrid');

    // get the data item bound to this table row
    var dataItem = grid.dataItem($tr);
    // set the value of the dropdown to select the proper item
    var value = dataItem.SprintModel ? dataItem.SprintModel.RowKey : '';
    $dropdown.val(value);
    var xyz = 1; // Just a row for a breakpoint
}

If I debug the jquery, then the dom tree is changed correctly:

• The option none is inserted.
• The current option is selected=true

But in the html only the new option <None> appears. The current selected option does not appear. It always appears: <None>

• The problem only occurs in firefox.
• In ie it works fine.
• In safari there is another problem. neither nor the correct option is selected. The field is empty.

?!?!

I remember in earlier firefox releases it used to work corretly. I have 3.6.13.

Answer 1

Your first problems is that you need quotations around the value of the attribute in this selector:

$('select[name$="grid.SprintModel"]')

Next up, $('<option/>', { text: '<None>', value: '' }) will create:

<option text="<None>" value="" />

and not:

<option value="">&lt;None&gt;</option>

Which is what I assume you would want.

Finally I cannot find any jQuery method called dataItem().

I am sorry this is not really a definitive answer, however complications usually arise from non-standard code. So have a closer look at the jQuery you are using and try and simplify it.