Member Avatar for jgill

Having problem with the following HTML code in IE7, everything works fine in IE6:
<option value='215001' label='250000,15,10,1'>This is a test</option>
In IE6 I see “This is a test” in the drop down list so that the user can make the selection but in IE7 I see '250000,15,10,1' in the drop down list instead of “This is a test”. I been trying to figure out why is this happening??? So if someone could please help me out with this...Appreciate yr time & effort…thanks!

  • 3 Contributors
  • 3 Replies
  • 119 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

Short answer: the visible text a browser shows can come from the option element’s label property in some browsers (IE7 being one of them), so storing machine-readable data in label will affect what users see. pointed toward removing/changing label, and suggested using a different property — both are on the right track, but here are practical, compatible ways to keep the machine data without breaking the UI.

If changing the server-generated markup is possible, put machine data somewhere other than label:

  • store the identifier(s) in value (or in a compound value that the server decodes), or
  • place the machine data in a custom attribute (HTML5 data-*) and read it with getAttribute (works in older browsers too).

If you cannot change the server output, a small client-side migration before the control renders fixes the display and preserves the data for submit. Example script (works in IE7 — uses getAttribute/setAttribute and option.text):

(function () {
  var sel = document.getElementById('mySelect');
  if (!sel) return;
  for (var i = 0; i < sel.options.length; i++) {
    var opt = sel.options[i];
    var meta = opt.getAttribute('label');
    if (meta) {
      opt.setAttribute('data-meta', meta);   // keep machine data
      opt.removeAttribute('label');          // prevent browsers from showing it
      if (!opt.text || opt.text.length === 0) opt.text = opt.value || ' ';
    }
  }

  var form = document.getElementById('myForm');
  if (form) {
    form.onsubmit = function () {
      var hidden = document.getElementById('metaField');
      if (!hidden) {
        hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'selectedMeta';
        hidden.id = 'metaField';
        form.appendChild(hidden);
      }
      var selOpt = sel.options[sel.selectedIndex];
      hidden.value = selOpt && selOpt.getAttribute('data-meta') || '';
      return true;
    };
  }
})();

Quick tips: ensure a standards DOCTYPE so IE7 runs in the intended mode; validate/inspect the server-side code that emits the <option> tags (some frameworks may be populating a label property automatically); and note that there is no standard HTML “tag” attribute — was likely referring to a server-side property or a framework-specific field. For reference on element attributes and option DOM properties, see the MDN docs for the option element and HTMLOptionElement: HTMLOptionElement / option element.

Recommended Answers

All 3 Replies

Member Avatar for katarey

you are using label attribute in option which will be preferred by IE 7, if you want to show “This is a test” so use this in label=” This is a test” or remove label attribute from tag


actually label attribute use in <optgroup>

label - Defines a label to use when using <optgroup>

<optgroup label="test">

<option value='215001'>This is a test</option>

or

<option value='215001' label='This is a test'></option>

more about this tag

http://www.w3schools.com/tags/tag_option.asp

Member Avatar for jgill

you are using label attribute in option which will be preferred by IE 7, if you want to show “This is a test” so use this in label=” This is a test” or remove label attribute from tag


actually label attribute use in <optgroup>

label - Defines a label to use when using <optgroup>

<optgroup label="test">

<option value='215001'>This is a test</option>

or

<option value='215001' label='This is a test'></option>

more about this tag

http://www.w3schools.com/tags/tag_option.asp

Thanks for the info but is there anyway that I can let the label be there & make it work as it is in IE7 (<option value='215001' label='250000,15,10,1'>215001 |A.J. Longo & Associates</option>)...b/c the application uses label value, I guess...thanks...appreciate it!

Member Avatar for MattEvans

change the application to use the "tag" property instead; it's a general usage property, and its use shouldn't have any side effects.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.