Question

在我的项目中，（编辑页面）我有一个包含db值的输入框。并在该输入框上放置一个div（当页面加载时不显示div）。我需要的是，当我点击该输入框时，我想启用div并显示为下拉选择列表。我正在使用以下代码，

 <div class="role">
       <div style="float:left;">In Rotary Club of Puthencruz : &nbsp;</div>
       <div class="currentrole"><input type="text" value="@Model.Mem_Role" name="Mem_Role" id="memrole"/></div>
     <div class="allrole"></div>
   </div>

// jquery的

$(document).ready(function () {
$('#memrole').click(function () {
    $('.allrole').attr('disabled', false);
    var arr = [
        { val: 'member', text: 'Member' },
        { val: 'president', text: 'President' }
    ];
    var sel = $('<select>').appendTo('body');
    $(arr).each(function () {
        sel.append($("<option>").attr('value', this.val).text(this.text));
    });
    $('.allrole').html(sel);
});

}）;

// CSS

.role {
position:relative;
display:inline-block;
}

.currentrole {
position: absolute;
margin-left:100%;
width:200%;
}

.allrole {
position:absolute;
width:150px;
height:20px;
margin-left:100%;
display:none;
}

但我的jquery部分无效，下拉列表选项列表不会显示。

Answer 1

将您的代码更改为 -

$(document).ready(function () {
    $('#memrole').click(function () {        
        var arr = [
            { val: 'member', text: 'Member' },
            { val: 'president', text: 'President' }
        ];
        var sel = $('<select>');

        $(arr).each(function () {
            sel.append($("<option>").attr('value', this.val)
                .text(this.text));
        });

        $('.allrole').html(sel);
        $('.allrole').show();
});

JSFiddle

您犯的错误是 - 要显示隐藏的div，您需要在其上调用jQuery的 show 方法。将已禁用的属性设置为false在此处不起作用。

此外，您只需调用$（''）即可创建select元素，无需将其附加到正文，因为您之后已将其附加到.allrole div。接下来，我不是将选项元素作为文本分配给选项，而是将其附加到.allrole div。

Answer 2

如果您想显示display:none或visibility:hidden的div，请使用$(yourselector).show();所以您的代码将是

$('.allrole').show(); instead of 
$('.allrole').attr('disabled', false);

工作演示为here参考show()

动态添加选择列表中的问题

2 个答案: