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

Question

在我的元素中，(编辑页面)我有一个输入框，其中包含来自数据库的值。并在该输入框上放置一个 div(当页面加载时未显示该 div)。我的需要是当我点击那个输入框时我想启用 div 并显示为下拉选择列表。我正在使用以下代码，

http://jsfiddle.net/wzPYf/1/

 <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 稍后。接下来，我没有将带有选项的 select 元素作为文本分配，而是简单地将其附加到 .allrole div。