我有这个jQuery代码来自动选择两个Bootstrap下拉列表的元素。
function selectOption(){
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
}
$('#floor').click(function(e) {
var name = e.target.name;
$('#room').children().remove().end();
$.post('GetRoom', {floor:name}, function(data){
var pre = 0;
for(i = 0; i < data.length; i++){
if(data[i] === ">"){
var room = data.substring(pre, i);
$('#room').append('<li><a href="#" name="' + room + '">' + room + '</a></li>');
pre = i + 1;
}
}
});
e.preventDefault();
});
$('#room').click(function(e){
var name = e.target.name;
$.post('GetPeople', {flag:1, room:name}, function(data){
$('#sector_2').children().remove().end();
if(data.length > 0){
$('#sector_2').append('<table class="table table-bordered" id="table_People"></table>');
$('#table_People').append('<thead><tr><th>Mã sinh viên</th><th>Mã thẻ</th><th>Tên sinh viên</th><th>Ngày sinh</th><th>Ngành học</th><th>Ngày vào</th><th>Ngày hết hạn</th><th>Tên phòng</th></tr></thead><tbody></tbody>');
$('#table_People').find('tbody').append(data);
}
});
e.preventDefault();
});
我通过body标签中的onload事件执行它。接下来是我的HTML代码:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="width:270px; text-align:center">Chọn lầu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="width:270px; text-align:center" id="floor">
<li><a href="#" name="1">Lầu 1</a></li>
<li><a href="#" name="2">Lầu 2</a></li>
<li><a href="#" name="3">Lầu 3</a></li>
<li><a href="#" name="4">Lầu 4</a></li>
<li><a href="#" name="5">Lầu 5</a></li>
<li><a href="#" name="6">Lầu 6</a></li>
<li><a href="#" name="7">Lầu 7</a></li>
</ul>
</div>
<label> </label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="width:270px; text-align:center">Chọn phòng
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="width:270px; text-align:center" id="room">
</ul>
使用id="floor"
的第一个下拉列表,我可以在选择下拉列表元素时自动设置该值。但是第二个id="room"
,我可以选择下拉列表的一个元素,但我无法自动设置该值。有人可以帮忙吗?