1

在我的项目中，（编辑页面）我有一个包含来自 db 的值的输入框。并在该输入框上放置一个 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 部分不工作，下拉选择列表不显示。

4

2 回答 2

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();
});

JSF中。

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

您也可以通过调用 $('') 来简单地创建一个select元素，无需将其附加到主体，因为.allrole稍后您已经将其附加到 div。接下来，我没有将带有选项的 select 元素作为文本分配，而是简单地将其附加到.allrolediv 中。

于 2013-09-03T05:03:02.707 回答
1

如果你想显示 divdisplay:none或者visibility:hidden只是使用$(yourselector).show();所以你的代码将是

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

工作演示在这里参考show()

于 2013-09-03T05:10:34.587 回答