Проблема в динамически добавленном списке выбора

Question

в моем проекте, (Редактировать страницу) У меня есть поле ввода, которое содержит значение из db. и поместите 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's show. Установка отключенного атрибута на false здесь не работает.

Также вы можете просто создать элемент select, вызвав $ (''), не нужно добавлять его в тело, так как вы уже прикрепляете его к div .allrole. Затем вместо того, чтобы назначать элемент select с помощью параметров в виде текста, я просто добавил его в div .allrole.

Answer 2

Если вы хотите, чтобы показать DIV, который display:none или visibility:hidden просто использовать $(yourselector).show(); Так что ваш код будет

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

рабочая демка here См show()