Question

我使用多选下拉列表来选择我的选择控件。我添加选项以在Javascript中选择控件。通过PHP从数据库中读取数据并传递给javascript文件。但是选项下拉列表的高度很小，就像我只能看到“全选”复选框而没有任何滚动。但是，如果我在HTML本身添加选项，那么下拉列表看起来很好。我在这里失踪了什么？

 <script src="<?=BASE_URL?>dropdown/multiple-select.js"></script>
    <link href="<?=BASE_URL?>dropdown/multiple-select.css" rel="stylesheet">
<div class="modal" id="SendmailModel" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"> 
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
        <h3 style="font-size: 17px;">Send Mail </h3>
    </div>
    <div class="modal-body">
        <form id="mailcomposeForm" id="_id_">
            <div class="control-group">
            <label class="control-label">Event Details</label>
            <div class="controls">
                <table class="table table-condensed table-bordered table-striped" id="event_days_table" style="display: none;width:544px;font-size:14px;">
                <tbody id="event_days_table_body">
                </tbody>
                </table>    
            </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="leave_status">Select Recipient(s)</label>             
                <select   id="emplist" name="employee_name" value="" multiple="multiple">

                </select>

            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" onclick="modJs.SendingMail();">Send</button>
        <button class="btn" onclick="modJs.closemaildialog();">Not Now</button>
    </div>
</div>
</div>
</div>


    script type="text/javascript">
    $(function() { 
    $('#emplist').change(function() {

            }).multipleSelect({
                width: '100%',
                height:'100%'
            });
    });
            </script>

在我的Javascript文件中..

Conferencelisting.method('MailSuccessCallback', function(callBackData) {

    var row = '<tr><th>From</th><td>_from_</td></tr><tr><th>To</th><td>_to_</td></tr><tr><th>Type</th><td>_type_</td></tr><tr><th>Created By</th><td>_created_</td><tr><th>Details</th><td>_details_</td></tr>';

    var eventdetails = callBackData[0];
    var html = "";  
    var trow = "";          
    for(var i=0;i<eventdetails.length;i++){
        trow = row;
        trow = trow.replace(/_from_/g,Date.parse(eventdetails[i].From).toString('d MMM yyyy <b>h:mm tt</b>'));
        trow = trow.replace(/_to_/g,Date.parse(eventdetails[i].To).toString('d MMM yyyy  <b>h:mm tt</b>'));
        trow = trow.replace(/_type_/g,eventdetails[i].type);
        trow = trow.replace(/_created_/g,eventdetails[i].employee);
        trow = trow.replace(/_details_/g,eventdetails[i].reason);
        html += trow;
    }
    $('#event_days_table_body').html(html);
    $('#event_days_table').show();  

//Adding employees name in selection box.

    var emplist = callBackData[1];
    var options = '';
    for (var i = 0; i < emplist.length; i++) {
    options += '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>';
    } 

    $("#emplist").html(options);    
    $('#SendmailModel').modal('show');      
});

如果我在HTML文件中添加选项，就像这样..我可以通过滚动获得精确的下拉..

<select   id="emplist" name="employee_name" value="" multiple="multiple">
 <option value="ALEX">ALEX</option>
  <option value="BOB">BOB</option>
  <option value="DE">DE</option>                
                </select>

Answer 1

我解决了自己。我认为高度不是问题，数据没有被添加。所以我改变了在javascript文件中添加代码的选项。现在它有效。

var emplist = callBackData[1];
    var options = '';
    for (var i = 0; i < emplist.length; i++) {
    $('#emplist').append( '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>' );
    }   
    $('#emplist').multipleSelect( 'refresh' );

多选选项中下拉框的高度

1 个答案: