Board logo

標題: [操作疑難] 想在firefox ie chrome之下兼容顯示和隱藏div該怎麼辦? [打印本頁]
作者: sss5555    時間: 2017-8-22 01:14     標題: 想在firefox ie chrome之下兼容顯示和隱藏div該怎麼辦?

本帖最後由 sss5555 於 2017-8-22 01:55 編輯

我想在選項中選取a22時div abc2會顯示但div abc1就會隱藏, 此時input id bbb的placeholder也會轉變為文字456, 但在選取a11 a33至a55時div abc1就會出現但div abc2就會隱藏此時input id bbb的placeholder就會轉變為文字123, div的出現及隱藏不會影響table的大小

我只做到在firefox和chrome情況一樣, 但ie沒效果, 所以我想在firefox ie chrome都兼容的情況下進行, 感謝各位><~


<select size="1" class="f6" id="abc" required="required">
                    <option value="" selected="selected">- 選項 -</option>
                    <option value="a11">a11</option>
                    <option value="a22">a22</option>
                    <option value="a33">a33</option>
                    <option value="a44">a44</option>
                    <option value="a55">a55</option>
                </select>

<input id="bbb" required="required"/>

<table width="200" border="1">
  <tr>
    <td><div id="abc1">abc1</div><div style="display:none;" id="abc2">abc2</div></td>
  </tr>
</table>

[attach]2006175[/attach]
作者: Ferrari2010    時間: 2017-8-22 21:28

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. </head>
  8. <body>
  9. <select size="1" class="f6" id="abc" required="required">
  10.                     <option value="" data-bbb-placeholder='' data-abc-id='abc1' selected="selected">- 選項 -</option>
  11.                     <option value="a11" data-bbb-placeholder=123 data-abc-id=abc1>a11</option>
  12.                     <option value="a22" data-bbb-placeholder=456 data-abc-id=abc2>a22</option>
  13.                     <option value="a33" data-bbb-placeholder=123 data-abc-id=abc1>a33</option>
  14.                     <option value="a44" data-bbb-placeholder=123 data-abc-id=abc1>a44</option>
  15.                     <option value="a55" data-bbb-placeholder=123 data-abc-id=abc1>a55</option>
  16.                 </select>

  18. <input id="bbb" required="required"/>

  20. <table width="200" border="1">
  21.   <tr>
  22.     <td><div id="abc1" class="abc">abc1</div><div class="abc" style="display:none;" id="abc2">abc2</div></td>
  23.   </tr>
  24. </table>
  25. </body>
  26. </html>
複製代碼
  1. document.querySelector('#abc').
  2. addEventListener('change', function(){
  3.   var o = this.options[this.selectedIndex],
  4.       placeholder = o.getAttribute('data-bbb-placeholder'),
  5.       abcID =       o.getAttribute('data-abc-id');
  6.   document.querySelector('#bbb').setAttribute('placeholder', placeholder);
  7.   Array.apply(null, document.querySelectorAll('.abc')).forEach(function(v){
  8.     v.style.display = 'none';
  9.   });
  10.   if (abcID) document.querySelector('#'.concat(abcID)).style.display = 'block';
  11. })
複製代碼
IE10+




歡迎光臨 電腦領域 HKEPC Hardware (https://h0.hkepc.com/forum/) Powered by Discuz! 7.2