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

JSFiddle .

あなたが犯していた間違いは、非表示の div を表示するには、jQuery のshowメソッドを呼び出す必要があることです。ここでは、 disabled 属性を に設定しfalseても機能しません。

また、$('') を呼び出すだけで要素を作成できます。後で div にselect既にアタッチしているため、ボディに追加する必要はありません。.allrole次に、select 要素にオプションをテキストとして割り当てるのではなく、単に.allrolediv に追加しました。

于 2013-09-03T05:03:02.707 に答える
1

display:noneまたはvisibility:hidden単に使用するdivを表示したい場合は$(yourselector).show();、コードは次のようになります

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

実際のデモはこちらですshow()を参照してください

于 2013-09-03T05:10:34.587 に答える