Question

我有一个选择下拉列表，它根据第一个选择动态变化。我还可以选择添加更多选项，这会动态创建更多下拉选择框。

然而，我希望新的下拉菜单增加他们所在的div的高度（并将其下方的任何内容推下来），但此时新的下降似乎只是放在任何内容的顶部在下面的div中。我认为它可能与div的嵌套有关，但是会感激一些帮助。

这是我的结构：

<div class="pageMiddle">
<div id="tutor_profile_container">
     <div id="profile_pic">
    <div class="subjselect"> 
        <h3>Primary  Subject</h3>
    <div class="select">
        <select id="subject">
        <option value="">Subject</option>
        <option value="other subjects">other subjests</option>
        </select>
    </div>
    <div id='topic' class='select'>
        <select id="topic">
        <option value="">Topic</option>
        </select>
    </div>
    <a href="#" id="another" class="more" onclick="Repeat(this)">Add Another Subject</a>
        </div>
  </div>
  </div>
           <div id="tutor_profile">
            some form content
    </div>
   </div> 
    <hr>

和JQuery：

function Repeat(obj) {
    var currentDiv = $(obj).parents('.subjselect');
    console.log(currentDiv)
    var dropDown = currentDiv.find('select');
    console.log(dropDown);
    dropDown.addClass("select");
    dropDown.clone().appendTo('#another');
}
$(function () {
    $("select#subject").change(function () {
        var subject = $("select#subject>option:selected").text();
        console.log(subject);
        $.ajax({
            type: 'GET',
            url: 'tutorprofileinput.php',
            data: {
                "subject": subject
            },
            dataType: 'json',

            success: function (data) {
                console.log(data);
                var options = [];

                $.each(data, function (key, val) {
                    counts = Object.keys(data).length;
                    console.log(counts);
                    options += '<option value="' + val.topic + '">' + val.topic + '</option>';
                    console.log(options);
                });
                $("select#topic").html(options);
            },
            error: function () {
                // failed request; give feedback to user
                $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
            }
        });
    })
})

和CSS：

#pageMiddle{
    width:940px;
    margin:0px auto;
    text-align: left;
    position:relative;
}

#tutor_profile_container{
}

#profile_pic{
    border-right:1px solid gray;
    float:left; 
    width:282px;
    top:7px;
    margin-bottom:25px;
    margin-right: 25px;
    position:absolute;
    height:90%;
}

#tutor_profile{
    position:relative;
    left:305;
    width:612;
    border: 2px dashed yellow;
    padding-top: 10px;
}

.select { 
    margin: 5px;
    width: 180px;
    height: 33px;
    overflow: hidden;
    background-image: url('../images/new_arrow.jpg');
    background-position: right center;
    background-color: white;
    border-radius: 5px;
    background-repeat: no-repeat;
}

.select select{
   background: transparent;
   width: 200px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 33px;
   -webkit-appearance: none; 
   color:#6F6F78;
   z-index: 3000;
}

Answer 1

此问题不是由于position:absolute导致的嵌套div。 div及其包装等等应该有一个position:relative

动态创建DOM元素而不增加div大小

1 个答案: