为什么我的选择下拉列表中的一个消失后，内容加载下面？ [英] Why is one of my select dropdowns disappearing once content is loaded below it?

查看：115
本文介绍了为什么我的选择下拉列表中的一个消失后，内容加载下面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有三个选项卡，其中包含一个选定的小部件;选择一个项目填充下面div的内容。在三起案件中的两起案件中，一切都很好;然而，在第三种情况下，下拉菜单消失了。内容布局的不同之处在于，对于第三个（坏的，下拉消失的情况），内容并不宽。





下面是失败者的样子（您应该在下拉列表中选择乡村音乐奖）：





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

 <$ c $ 。C> $（ '＃MoviesContent'）HTML（htmlBuilder）; 
。 。 。 
 $（'＃MusicContent'）。html（htmlBuilder）;

那么为什么其他人会认为选择小部件的踩踏场地是不可侵犯的，而音乐部分通过花圃跺脚？



更新



受欢迎的需求，这里是相关的代码：



jQuery


$ b 

  $（'＃musicDropDown' ）.change（function（）{
 var sel = this.value; 
 ...。
 else if（（sel ==CMA）&&（currentMusicSelection！= CMA））{
 currentMusicSelection =CMA; 
 getCMA（）; 
} 
 ... 
}）; // musicDropDown 
 
函数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>'; （dataPoint.cd.trim（）。length> 2）{
 htmlBuilder + ='< button>< a href = \'''+ Urlify（dataPoint 
） .cd）+'\''+ 
'target = \_blank\> CD< / a>< / button>'; （dataPoint.vinyl.trim（）。length> 2）{
 htmlBuilder + ='< button>< a href = \'''+ Urlify（dataPoint 
）乙烯基）+'\\'''+ 
'target = \_blank\>乙烯基< / a>< / button>'; 
} 
 htmlBuilder + ='< / section>'; 
} 
}）; //每个
 $（'＃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; （$（this。）.height（）> $最大）{
 $最大= $（this））中的每一个函数（）{
（。wrapper）。 height（）; 
} 
}）; 
 $（。wrapper）。css（height，$ largest）; 
}

CSS 

  .yearBanner {
 font-size：2em; 
颜色：白色; 
 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 {
 / *当使用景观覆盖img时，这可能需要更宽* / 
 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; 
颜色：橙色; 
 width：160px; 
} 
 
 .clearfix {
 display：inline-block; 
}

HTML 

 < div id =tabsclass =content-wrapper> 
< ul> 
< li>< a href =＃tab-Books>图书< / a>< / li> 
< li>< a href =＃tab-Movies>电影< / a>< / li> 
< li>< a href =＃tab-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图书奖< / option> 
< / select> 
< div id =BooksContentclass =clearfix>书籍中的内容标签< / div> 
< / div> 
< div id =tab-Movies> 
< select id =moviesDropDown> 
< option value =奥斯卡>奥斯卡颁奖典礼&奥斯卡< / option> 
< option value =GoldenGlobe>金球奖< / option> 
< option value =戛纳电影节>戛纳电影节< / option> 
< option value =Sundance> Sundance< / option> 
< / select> 
< div id =MoviesContentclass =clearfix>电影中的内容标签< / div> 
< / div> 
< div id =tab-Music> 
< select id =musicDropDown> 
< option value =Grammies> Grammies< / option> 
< option value =AMA>美国音乐奖< / option> 
< option value =CMA>乡村音乐奖< / option> 
< option value =Indies> Indies< / option> 
< / select> 
< div id =MusicContentclass =clearfix>音乐标签中的内容< / div> 
< / div> 
< / div>

和一些json记录一起玩： 

  [
 {
category：2012，
title：blanktitle， 
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}，
 {
category：年度专辑，
title：Chief，
artist：Eric Church，
mp3：B006N98GWQ，
cd：B004ZBIJE4，
vinyl：B005CAAWZQ，
 imghref：< a href = \http://rads.stackoverflow.com/amzn/click/B004ZBIJE4target = \_blank\>< img height = \160 \\ \\width = \160 \src = \http://images.amazon.com/images/P/B004ZBIJE4.01.MZZZZZZZ.jpg\alt = \Eric Church专辑封面\\/>< / a> 
}，
 {
category：2011，
title：blanktitle，
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}， 
$bcategory：年度专辑，
title：My Kinda Party，
artist：Jason Aldean，
mp3：B0048067WI，
cd：B0041GWWSC，
vinyl： - ，
imghref：< a href = \ http://rads.stackoverflow.com/amzn/click/B0041GWWSCtarget = \_blank\>< img height = \160 \width = \\160 \src = \http://images.amazon.com/images/P/B0041GWWSC.01.MZZZZZZZ.jpg\alt = \Jason Aldean专辑封面\/>< / a> 
}，
 {
category：1983，
title：blanktitle，
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}， 
 {
category：年度最佳专辑，
title：更贴近您？，
艺术家：阿拉巴马州，
mp3：B00138H5QU，
cd：B000002W6X，
vinyl：B000M6RWOY，
imghref：< a href = \ http://rads.stackoverflow.com/amzn/click/B000002W6Xtarget = \_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
}， 
类别：年度专辑，
标题：永远在我心中，
艺术家：威利尼尔森，
mp3： - ，
cd：B0012GMY6Y，
vinyl： - ，
imghref：< a href = \http://rads.stackoverflow.com/amzn/click/B0012GMY6Ytarget = \_blank\>< img height = \160 \width = \160 \ src = \http://images.amazon.com/images/P/B0012GMY6Y.01.MZZZZZZ.jpg \alt = \Willie Nelson Album cover\/>< / a>  
}，
 {
category：1981，
title：blanktitle，
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}， 
类别：年度专辑，
标题：我相信你，
艺术家：唐·威廉姆斯，
mp3：B0048ZLL2O，
cd：B006M6AI4E，
vinyl：B000HA1VJM，
imghref：< a href = \ http://rads.stackoverflow.com/amzn/click/B006M6AI4Etarget = \_blank\>< img height = \160 \width = \\160 \src = \http://images.amazon.com/images/P/B006M6AI4E.01.MZZZZZZZ.jpg\alt = \唐·威廉姆斯专辑封面\/>< / a> 
}，
 {
category：1980，
title：blanktitle，
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}， 
类别：年度专辑
标题：煤矿工女儿
艺术家：原声音乐
 mp3：B00AE2CV38，
cd：B00004C4Q6，
vinyl： - ，
imghref：< a href = \ http://rads.stackoverflow.com/amzn/click/B00004C4Q6target = \_blank\>< img height = \160 \width = \160 \src = \\http://images.amazon.com/images/P/B00004C4Q6.01.MZZZZZZ.jpg \alt = \Soundtrack Album cover \/>< / a> 
}，
 {
category：1968，
title：blanktitle，
artist：blankauthor，
mp3：blankmp3，
cd：blankcd，
vinyl：blankvinyl，
imghref：blankimghref
}， b 
 
category：年度专辑，
title：在Folsom监狱，
艺术家：Johnny Cash，
mp3：B00136Q342，
cd：B000028U0Y，
vinyl：B003WWZ148，
imghref：< a href = \ http://rads.stackoverflow.com/amzn/click/B000028U0Ytarget = \_blank\>< img height = \160 \width = \160 \src = \http://images.amazon.com/images/P/B000028U0Y.01.MZZZZZZZ.jpg\alt = \Johnny Cash Album cover \/>< / a> 
} 
]


解决方案

I我不确定，但我会猜测你的下拉菜单仍然存在 - 它只是坐在页面的底部，因为它与你的大div相同，并且内联块将默认对齐它们的底边。其他人正在工作，因为他们足够宽以强制换行，但是你的窄音乐分区不是。尝试将您的内容div从 display：inline-block 更改为 display：block ，以将它们强制到单独的行或添加清除：均。


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://rads.stackoverflow.com/amzn/click/B004ZBIJE4" 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://rads.stackoverflow.com/amzn/click/B0041GWWSC" 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://rads.stackoverflow.com/amzn/click/B000002W6X" 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://rads.stackoverflow.com/amzn/click/B0012GMY6Y" 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://rads.stackoverflow.com/amzn/click/B006M6AI4E" 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://rads.stackoverflow.com/amzn/click/B00004C4Q6" 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://rads.stackoverflow.com/amzn/click/B000028U0Y" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000028U0Y.01.MZZZZZZZ.jpg\" alt=\"Johnny Cash Album cover\" /></a>"
    }
]

解决方案

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.

这篇关于为什么我的选择下拉列表中的一个消失后，内容加载下面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆