0
我有一個選擇下拉菜單,它會根據第一個選擇動態更改。 我也可以選擇添加更多的選擇,這會動態地創建更多下拉選擇框。動態創建DOM元素不增加div尺寸
但是,我希望新的下拉菜單可以增加它們坐在的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;
}
但是,當我改變#profile_pic的位置屬性,那麼在#tutor_profile的內容被推下來,我不想 - 我想有兩列並排,但增加的高度與其他內容 – Mobaz
有兩列浮動其中一個包裝div。不要爲此使用'position:absolute'。所有時間你都會設置爲'絕對',它永遠不會增加。另一種方法是使用一個複雜的ajax javascript函數來動態調整高度。 – Vector
好矢量 - 感謝您的幫助 - 讓它與位置:相對工作 – Mobaz