将元素的值设置为Bootstrap下拉列表

时间:2015-09-01 01:51:36

标签: jquery html twitter-bootstrap

我有这个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",我可以选择下拉列表的一个元素,但我无法自动设置该值。有人可以帮忙吗?

0 个答案:

没有答案