Question

I have the following code :-

//-- function to enable editing of content if disabled for new records --\\
function edit(e,elems)
{
  if ( e.value == "new" )
  {
    $(e).parent().parent().find(":input[readonly]").each(function(index) {
      $(this).prop('readonly',false);
      $(this).addClass('highlight');
    });
      $(e).parent().parent().find("select[disabled]").each(function(index) {
      $(this).prop('disabled',false);
      $(this).addClass('highlight');
//-- Insert dynamic options --\\
      if ($(this).attr('name') == 'low')
      {
        var optVal = "option[value='" + $(this).val() + "']";
        var optclone = $("#affoptions").clone();
        $(optclone).find(optVal).attr("selected",true);
        $(this).html($(optclone).find("option"));
      }
      if ($(this).attr('name') == 'high')
      {
        var optVal = "option[value='" + $(this).val() + "']";
        optclone = $("#insoptions").clone();
        $(optclone).find(optVal).attr("selected",true);
        $(this).html($(optclone).find("option"));
      }
    });
    $(e).parent().parent().find(elems).focus();
  } else {
      $(e).parent().parent().find(elems).each(function(index) {
      if ( $(this).is('select') )
      {
        $(this).prop('disabled',true);
      } else {
        $(this).prop('readonly',true);
      }
      $(this).removeClass('highlight');
    });
  }
}

Which works just fine in Google Chrome but doesn’t work in IE 8.
Essentially I have a form with radio buttons and one of them is for new entries. This basically enables an input text field and removes the disabled flag for select fields.
The select options have only 1 value in them when disabled. The radio button inserts all available options from a hidden div and marks the selected index value in the new options to match the single entry from the initial load.

In IE the select options are wiped out completely leaving nothing not even the initial entry.

I haven’t been able to get this to work properly and assume it’s a problem with the cloned element.

What am I doing wrong?

Thanks
Craig

Answer 1

Never mind I figured it out eventually.
My code is fine, the problem it turns out was IE didn’t like the fact that my hidden DIV with the options in it that I was cloning, was missing the SELECT tags. Go figure.

So changing this :-

<div id="affoptions" class="options">
  <option value="0001">0001 | A</option>
  <option value="0002">0002 | B</option>
  <option value="*">* | All</option>
  <option value="0003">0003 | C</option>
  <option value="0004">0004 | D</option>
</div>

To this :-

<div id="affoptions" class="options">
 <select>
  <option value="0001">0001 | A</option>
  <option value="0002">0002 | B</option>
  <option value="*">* | All</option>
  <option value="0003">0003 | C</option>
  <option value="0004">0004 | D</option>
 </select>
</div>

Resolved it.

Cheers
Craig