我有一个选择下拉菜单,它会根据第一个选择动态变化。我还可以选择添加更多选择,这会动态创建更多下拉选择框。
但是,我希望新的下拉菜单增加它们所在的 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;
}