0

最初の選択に基づいて動的に変化する選択ドロップダウンがあります。さらに選択を追加するオプションもあり、これにより、より多くのドロップダウン選択ボックスが動的に作成されます。

ただし、新しいドロップダウンで、それらが配置されている 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;
}
4

1 に答える 1

1

この問題は、ネストされた div が原因ではありませんposition:absolute。およびそのdivラッパーなどにはposition:relative

于 2013-05-17T20:17:49.557 に答える