-1

問題があります。お問い合わせフォームがあり、連絡先の件名を選択するためのドロップダウン選択があります。firefox では動作していますが、IE では動作していません... 助けていただけますか?

JS 部分:

<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>
4

4 に答える 4

2

innerHTMLIE は をサポートしていません<tr>。次のようにします。

<tr>
    <td><div id="change"></div></td>
</tr>

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

于 2012-05-06T00:00:16.417 に答える
0

マイクロソフト サポートの問題 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 が無効になっている場合でも互換性があるという追加のボーナスがあります (ただし、もう少しユーザーの直感が必要です)。

于 2012-05-06T00:00:46.987 に答える
0

これは既知のバグのようです: http://support.microsoft.com/kb/276228

ところで、jquery を使用することをお勧めします。

document.getElementById('change').innerHTML = jobhtml;

なりました

$("#change").html(ジョブhtml); <--いいえ？

ps：jqueryはinnerHTMLを使用していると思います..だからその問題は解決しないはずです..

于 2012-05-06T00:00:59.430 に答える
0

これは、jQuery を使用するとはるかに簡単に実行できます。あなたがその考えに心を開いているなら。

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

jsFiddle の例

于 2012-05-06T00:02:52.603 に答える