選擇在IE9

Question

有一個很奇怪的問題，IE9和我創建了選擇下拉上的變化消失。

它只發生在IE9中，這實在是不可思議。

基本上，存在的頁面（共4個）上的多個下拉菜單。當你點擊其中的一個，然後從下拉菜單中選擇一個選項時，父頁下拉菜單將從頁面中消失，並從我所能看到的DOM中消失。

當您選擇從任何一個下拉菜單的一個選項，會出現這種情況。因爲它在IE8

工作正常

HTML

<div id="news7" style="width: 650px; overflow:hidden;"> 
    <h2 class="h2-3">20' DEEP</h2> 
    <select name="booth-images" id="booth-dropdown" class="booth-images showName"> 
    <option value="">-- Select an option from the dropdown</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X13FRONTsm.jpg" data-dimension="20X13">20X13</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X15FRONTsm.jpg" data-dimension="20X15">20X15</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X20FRONTsm.jpg" data-dimension="20X20">20X20</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X23FRONTsm.jpg" data-dimension="20X23">20X23</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X26FRONTsm.jpg" data-dimension="20X26">20X26</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X30FRONTsm.jpg" data-dimension="20X30">20X30</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X36FRONTsm.jpg" data-dimension="20X46">20X46</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X40FRONTsm.jpg" data-dimension="20X40">20X40</option> 
    <option value="http://enkshows.com/img/enkexhibitors/20X50FRONTsm.jpg" data-dimension="20X50">20X50</option> 
    </select> 
    <div class="image-display"></div> 
</div> 

JS我它縮小到只有IE9，這是瘋狂的

$(document).ready(function(){ 
    $("select").each(function(){ 
     $(this).on('change', function(){ 
      var src = $(this).val(); 
      var imageSrc = "http://enkshows.com/img/enkexhibitors/"; 
      var title = $(this).find(":selected").data("dimension"); 
      var url = "<a rel='shadowbox' title='" + title + "' href='" + imageSrc + title + "FRONT.jpg' target='_blank'><img src='" + src + "'></a>"; 
      var title = "<p><a href='" + src + "' >" + title + "</a><p>" 

      var $this = $(this); 
      var $image = $(".image-display"); 
      var $imageDisplay = $(this).parent().find(".image-display"); 

      if ($this.val() == "") { 
       $image.removeClass('active'); 
      } else { 
       $image.removeClass('active').hide(); 
       $imageDisplay.addClass('active').show(); 
       $this.parent().find(".image-display a").not(":selected").remove(); 
       $this.parent().find(".image-display p").not(":selected").remove(); 
       $imageDisplay.addClass('active-display').append(url, title); 
      } 
     }); 
    }); 
}); 

另外，對不起，如果JS的是馬虎。我是一個新手，試圖變得更好，所以我完全接受一個更清潔的解決方案。

Answer 1

$(document).ready(function(){ 
    $("#news7").on('change','select', function(){ 
      var src = $(this).val(); 
      var imageSrc = "http://enkshows.com/img/enkexhibitors/"; 
      var title = $(this).attr("data-dimension"); 
      var url = "<a rel='shadowbox' title='" + title + "' href='" + imageSrc + title + "FRONT.jpg' target='_blank'><img src='" + src + "'></a>"; 
      var title = "<p><a href='" + src + "' >" + title + "</a><p>" 

      var $this = $(this); 
      var $image = $(".image-display"); 
      var $imageDisplay = $(this).closest("#news7").find(".image-display"); 

      if ($this.val() == "") { 
       $image.removeClass('active'); 
      } else { 
       $image.removeClass('active').hide(); 
       $imageDisplay.addClass('active').show(); 
       $this.closest("#news7").find(".image-display a").not(":selected").remove(); 
       $this.closest("#news7").find(".image-display p").not(":selected").remove(); 
       $imageDisplay.addClass('active-display').append(url, title); 
      } 
     }); 

});