Why is one of my select dropdowns disappearing once content is loaded below it?

问题

I have three tabs that sport a select widget; selecting an item populates the contents of the div below. In two of the three cases, all is fine; in the third, though, the dropdown disappears. The difference in the layout of the content is that in the case of the third one (the "bad" one, where the dropdown disappears), the content is not as wide.

Here's what a good one looks like:

Here's what the one that fails looks like (you should see "Country Music Awards" selected in a dropdown):

The code is the same for all of them: the HTML is dynamically created, then it is assigned to the content area:

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

So why would the others consider the stomping grounds of the select widget to be inviolate, while the Music section stomps through the flowerbed with clodhoppers?

UPDATE

By popular demand, here's the relevant code:

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>

And some json "records" to play with:

[
    {
        "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>"
    }
]

回答1:

I'm not sure, but I'm going to guess that your dropdown is still present - it's just sitting at the bottom of the page, since it's on the same line as your big div, and inline blocks will align their bottom edges by default. The others are working because they're wide enough to force a line break, but your narrow music div isn't. Try changing your content divs from display:inline-block to display:block to force them onto separate lines, or add clear:both.

来源：https://stackoverflow.com/questions/18034016/why-is-one-of-my-select-dropdowns-disappearing-once-content-is-loaded-below-it