jquery - 为什么我的选择下拉列表之一会在内容加载到其下方后消失？

Question

我有三个选项卡，每个选项卡都有一个选择小部件；选择一个元素填充下面的 div 的内容。在这三种情况中的两种情况下，一切都很好；但是，在第三个中，下拉列表消失了。内容布局的不同之处在于，在第三种情况下(“不好”的一种，下拉菜单消失了)，内容没有那么宽。

这是一个好的样子:

这是失败的样子(您应该会在下拉列表中看到“乡村音乐奖”被选中):

所有这些代码都是相同的:动态创建 HTML，然后将其分配给内容区域:

$('#MoviesContent').html(htmlBuilder);
. . .
$('#MusicContent').html(htmlBuilder);

那么，为什么其他人会认为选择小部件的踩踏 field 是神圣不可侵犯的，而音乐部分却在花坛上踩着土鳖呢？

更新

应大众需求，这里是相关代码:

jQuery

        $('#musicDropDown').change(function () {
            var sel = this.value;
. . .
            else if ((sel == "CMA") && (currentMusicSelection != "CMA")) {
                currentMusicSelection = "CMA";
                getCMA();
            }
. . .
        }); //musicDropDown

function getCMA() {
    var htmlBuilder = '';
    $.getJSON('Content/cma.json', function (data) {
        $.each(data, function (i, dataPoint) {
            if (IsYear(dataPoint.category)) {
                htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
            } else { 
                htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                    dataPoint.imghref +
                    '<div id=\"prizeCategory\" class=\"category\">' +
                    dataPoint.category +
                    '</div><br/><cite id=\"prizeTitle\" >' +
                    dataPoint.title +
                    '</cite><br/><div id=\"prizeArtist\" class=\"artist\">' + dataPoint.artist + '</div><br/>';
                if (dataPoint.mp3.trim().length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.mp3) + '\"' +
                        ' target=\"_blank\" >mp3</a></button>';
                }
                if (dataPoint.cd.trim().length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.cd) + '\"' +
                        ' target=\"_blank\" >CD</a></button>';
                }
                if (dataPoint.vinyl.trim().length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.vinyl) + '\"' +
                        ' target=\"_blank\" >Vinyl</a></button>';
                }
                htmlBuilder += '</section>';
            }
        }); //each
        $('#MusicContent').html(htmlBuilder).
             find('img, button').click(function (evt) {
                 $(this).css('border', '1px solid gold')
             });
        $('#MusicContent').css('background-color', 'black');
        $('button').button();
    }); //getCMA
    $largest = 0;
    $(".wrapper").each(function () {
        if ($(this).height() > $largest) {
            $largest = $(this).height();
        }
    });
    $(".wrapper").css("height", $largest);
}

CSS

.yearBanner {
    font-size: 2em;
    color: white;
    font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width:400px;
    padding-top: 50px;
    margin-left:50px;
    padding-bottom:20px;
}

.floatLeft {
    float: left;
    padding-right: 10px;
    padding-left: 5px;
}

section.wrapper {
    /* this may need to be wider when landscape cover img is used */
    min-width: 400px;
    overflow: hidden;
    display: block;
    float: left;
    margin-top: 5px;
}

.wrapper{
    float: left;
    width: 400px;
    margin-left:20px;
    padding-bottom:20px;
}

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}

.clearfix {
    display: inline-block;
}

HTML

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Books">Books</a></li>
        <li><a href="#tab-Movies">Movies</a></li>
        <li><a href="#tab-Music">Music</a></li>
    </ul>
    <div id="tab-Books">
        <select id="bookDropDown">
            <option value="Pulitzer">Pulitzer</option>
            <option value="NBCC">National Book Critics Circle</option>
            <option value="NBA">National Book Awards</option>
            <option value="NOBA">National Outdoors Book Awards</option>
        </select>
        <div id="BooksContent" class="clearfix">Content in Books tab</div>
    </div>
    <div id="tab-Movies">
        <select id="moviesDropDown">
            <option value="Oscars">Academy Awards/Oscars</option>
            <option value="GoldenGlobe">Golden Globe</option>
            <option value="Cannes">Cannes Film Festival</option>
            <option value="Sundance">Sundance</option>
        </select>
        <div id="MoviesContent" class="clearfix">Content in Movies tab</div>
    </div>
    <div id="tab-Music">
        <select id="musicDropDown">
            <option value="Grammies">Grammies</option>
            <option value="AMA">American Music Awards</option>
            <option value="CMA">Country Music Awards</option>
            <option value="Indies">Indies</option>
        </select>
        <div id="MusicContent" class="clearfix">Content in Music tab</div>
    </div>
</div>

还有一些可以玩的 json“记录”:

[
    {
        "category": "2012",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "Chief",
        "artist": "Eric Church",
        "mp3": "B006N98GWQ",
        "cd": "B004ZBIJE4",
        "vinyl": "B005CAAWZQ",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B004ZBIJE4/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B004ZBIJE4.01.MZZZZZZZ.jpg\" alt=\"Eric Church Album cover\" /></a>"
    },
    {
        "category": "2011",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "My Kinda Party",
        "artist": "Jason Aldean",
        "mp3": "B0048067WI",
        "cd": "B0041GWWSC",
        "vinyl": "--",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B0041GWWSC/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0041GWWSC.01.MZZZZZZZ.jpg\" alt=\"Jason Aldean Album cover\" /></a>"
    },
    {
        "category": "1983",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "The Closer You Get?",
        "artist": "Alabama",
        "mp3": "B00138H5QU",
        "cd": "B000002W6X",
        "vinyl": "B000M6RWOY",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B000002W6X/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000002W6X.01.MZZZZZZZ.jpg\" alt=\"Alabama Album cover\" /></a>"
    },
    {
        "category": "1982",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "Always on My Mind",
        "artist": "Willie Nelson",
        "mp3": "--",
        "cd": "B0012GMY6Y",
        "vinyl": "--",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B0012GMY6Y/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0012GMY6Y.01.MZZZZZZZ.jpg\" alt=\"Willie Nelson Album cover\" /></a>"
    },
    {
        "category": "1981",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "I Believe in You",
        "artist": "Don Williams",
        "mp3": "B0048ZLL2O",
        "cd": "B006M6AI4E",
        "vinyl": "B000HA1VJM",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B006M6AI4E/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B006M6AI4E.01.MZZZZZZZ.jpg\" alt=\"Don Williams Album cover\" /></a>"
    },
    {
        "category": "1980",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "Coal Miner's Daughter",
        "artist": "Soundtrack",
        "mp3": "B00AE2CV38",
        "cd": "B00004C4Q6",
        "vinyl": "--",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B00004C4Q6/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B00004C4Q6.01.MZZZZZZZ.jpg\" alt=\"Soundtrack Album cover\" /></a>"
    },
    {
        "category": "1968",
        "title": "blanktitle",
        "artist": "blankauthor",
        "mp3": "blankmp3",
        "cd": "blankcd",
        "vinyl": "blankvinyl",
        "imghref": "blankimghref"
    },
    {
        "category": "Album of the Year",
        "title": "At Folsom Prison",
        "artist": "Johnny Cash",
        "mp3": "B00136Q342",
        "cd": "B000028U0Y",
        "vinyl": "B003WWZ148",
        "imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B000028U0Y/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000028U0Y.01.MZZZZZZZ.jpg\" alt=\"Johnny Cash Album cover\" /></a>"
    }
]

Answer 1

我不确定，但我猜你的下拉菜单仍然存在 - 它只是位于页面的底部，因为它与你的大 div 在同一行, 和行内 block 将默认对齐它们的底部边缘。其他人正在工作，因为它们足够宽以强制换行，但您的狭窄音乐 div 却没有。尝试将您的内容 div 从 display:inline-block 更改为 display:block 以强制它们分行，或添加 clear:both。