AJP
AJP

Reputation: 2125

IE9/IE7 select tag behave different

<select size="4" name="lbxEmployees" id="lbxEmployees" disabled="disabled" class="FormDropDown" style="width:100%;">
        <option value="1">jim jubak</option>
        <option value="2">Peyton Andrew</option>
        <option selected="selected" value="3">Pat smith</option>
        <option value="4">Mark Smith</option>
        <option value="5">Kobe Bryan</option>
</select>

The above code renders differently on IE9 and IE7. Can someone explain why? The select box is disabled in both browsers, but one shows the selected value (IE7) while the other does not (IE9).

Upvotes: 1

Views: 1470

Answers (2)

Friend of Kim
Friend of Kim

Reputation: 860

It's simply because IE9 is a different browser. IE7 was released back in 2006, while IE9 in 2011. There is no point of showing what is default in something that isn't enabled, so they've disabled it..

EDIT: If you want to disable it because of security, you should enforce that on the server-side. If a hacker copies your source code, and removes the "disabled" part, they will be able to change and include that information as well.

Upvotes: 1

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

Interesting , starting with an enabled check box, I tried this as a poss way to fool IE9 ...

<script type="text/javascript">

 document.getElementById("lbxEmployees").value = 3;

 document.getElementById("lbxEmployees").disabled=true;

</script>

didn't work. did in IE7

( if your goal is to presnt to the user the selected value and have to have the select box ) looks like we might need to do something like ...

  <div id="EmployeesDiv">

    Employee:

    <select name="lbxEmployees" id="lbxEmployees">
      <option value="1">jim jubak</option>
      <option value="2">Peyton Andrew</option>
      <option selected="selected" value="3">Pat smith</option>
      <option value="4">Mark Smith</option>
      <option value="5">Kobe Bryan</option>
    </select>

  </div>


<script type="text/javascript">

 window.onload = function() {
 var selectBox = document.getElementById("lbxEmployees");
 var val = (selectBox.options[selectBox.selectedIndex].text;

/* remove select box and replace */
document.getElementById("EmployeesDiv").innerHTML ="Employee: "+val;
}
</script>

your app might have a simpler way of course, the IE9 thing got me thinking ...

*Not great if the reason for the disable is security, do all this on the sever side before page print if so!

Upvotes: 0

Related Questions