Question

我有一个问题，我有一个联系表单，它有一个下拉选择选择联系人的主题，它正在使用Firefox而不是IE ...你可以帮助PLZ，

JS Part：

<script type="text/javascript">
var jobhtml = "<td class='style1'>Job Reference:</td><td>&nbsp;</td><td><label><input type='text' name='job-reference' id='textfield4' /></label></td>";
var orderhtml = "<td class='style1'>Item Reference:</td><td>&nbsp;</td><td><label><input type='text' name='order-id' id='textfield4' /></label></td>";
function change()
{
   switch (document.getElementById("select").value)
   {
      case "job":
      document.getElementById('change').innerHTML = jobhtml;
      break;
      case "order":
      document.getElementById("change").innerHTML = orderhtml;
      break;
      default:
      document.getElementById("change").innerHTML="";
      break;
   }
}
</script>

HTML部件：

 <tr>
          <td><span class="style1">Subject</span></td>
          <td>&nbsp;</td>
          <td><label>
            <select name="select" id="select" onchange="change();">
              <option>Please select</option>
              <option>Meeting</option>
              <option>Call</option>
              <option value="order">Order</option>
              <option value="job">Apply for a position</option>
              <option>Testimonials</option>
              <option>Complains</option>
            </select>
          </label></td>
        </tr>
          <tr id="change" name="change">

        </tr>

Answer 1

IE不支持innerHTML的{{1}}。这样做：

<tr>

http://www.hotscripts.com/forums/javascript/46764-solved-innerhtml-tr-not-working-ie.html

Answer 2

Microsoft Support issue 239832

您不能在单元格以外的表格元素上设置innerHTML。

有很多更好的解决方案。我会做的是这样的事情：

<table id="tbl">
  <thead>
    <tr>
      <td>Subject</td>
      <td><select onChange="change(this.value);">...</select></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Job Reference</td>
      <td>............</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Item Reference</td>
      <td>............</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  (function() {
    var tbl = document.getElementById('tbl'),
        tbd = tbl.tBodies;
    tbd[0].style.display = tbd[1].style.display = "none";
    window.change = function(val) {
      tbd[0].style.display = val == "job" ? "" : "none";
      tbd[1].style.display = val == "order" ? "" : "none";
    };
  })();
</script>

基本上将表格分成不同的实体，然后根据所选值显示/隐藏它们。如果禁用JavaScript，这会增加兼容性（尽管它需要更多的用户直觉）。

Answer 3

似乎这是一个已知的BUG： http://support.microsoft.com/kb/276228

顺便提一下，我建议你使用jquery：

document.getElementById（'change'）。innerHTML = jobhtml;

成了

$（ “＃改变”）的HTML（jobhtml）。＆lt; - 更好的没有？

ps：我认为jquery使用innerHTML..so应该不解决这个问题..

Answer 4

这可以通过jQuery更简单地完成。如果你对这个想法持开放态度。

$(document).ready(function(){
   $('#select').change(function(){
       switch($(this).val()){
           case "job":
               $('#change').html(jobhtml);
               break;
           ...other cases...
       }
   });
});

jsFiddle Example

InnerHTML不能与IE一起使用？

4 个答案: