在IE9中发生更改时选择消失

Question

IE9和我创建的select下拉列表有一个非常奇怪的问题。

这种情况只发生在IE9中，这真的很奇怪。

基本上，页面上有多个下拉列表(总共4个)。当您单击其中之一并从下拉列表中选择一个选项时，父下拉列表将从页面中消失，并从我所看到的DOM中消失。

当您从任何下拉列表中选择一个选项时，就会发生这种情况。我只把它缩小到IE9，这太疯狂了，因为它在IE8中很好

<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

$(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);
            }
        });

});