2

私はjqueryドロップダウンメニューに取り組んでいます。(デモはこちら)

そして、私がしなければならなかったことは、ユーザーが選択したものの完全なパスを取得し、右側にこれ以上オプションがないことを検証することでした. 元のアイデア (ドロップダウン メニューの前、通常の li/ul のみ) は、このフィドルで実現されました。

ご覧のとおり、後で使用するための検証とフル パス変数があります。

さて、私が達成したいのは、ドロップダウンメニューと同じことです。

これは、ドロップダウン メニューに基づいてユーザーの選択をラベルに入力するコードです。

<asp:Label ID="LabelMenu" text="" runat="server" /> <span id="menuSelection"></span>

ご覧のとおり、スパン IDmenuSelectionが結果を取得する ID です。

だから私の質問はです。click結果のために、フィドルに表示されている関数をどのように置き換えることができmenuSelectionますか?

目標は、ユーザーがドロップダウン メニューからフィールドを選択したら、フル パスと検証を取得することです。

よろしく。

4

5 に答える 5

1

私はあなたを誤解しているかもしれませんが、これは少なくともあなたにアイデアを与えるでしょう.

資力：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

html:

<label id="LabelMenu" text="" runat="server" />
<span id="menuSelection">My Span List</span>

jQuery:

$(document).ready(function(){
    // Flag to prevent multiple insertion
    var flag = false;
    $("#menuSelection").click(function() {
        // Prevent inserting more than 1 menu
        if (flag == false) {
            // Your menu
            $('<ul id="mylist"> <li><a href="#">First Level 1</a> <ul> <li><a href="#">FL1 Second Level 1</a></li> <li><a href="#">FL1 Second Level 2</a></li> </ul> </li> <li><a href="#">First Level 2</a> <ul> <li><a href="#">FL2 Second Level 1</a> <ul> <li><a href="#">FL2 SL1 Third Level 1</a></li> </ul> </li> <li><a href="#">FL2 Second Level 2</a> <ul> <li><a href="#">FL2 SL2 Third Level 1</a></li> </ul> </li> <li><a href="#">FL2 Second Level 3</a></li> </ul> </li> <li><a href="#">First Level 3</a> <ul> <li><a href="#">FL3 Second Level 1</a> <ul> <li><a href="#">FL3 SL1 Third Level 1</a></li> <li><a href="#">FL3 SL1 Third Level 2</a></li> </ul> </li> <li><a href="#">FL3 Second Level 2</a></li> <li><a href="#">FL3 Second Level 3</a> <ul> <li><a href="#">FL3 SL3 Third Level 1</a></li> </ul> </li> </ul> </li> <li><a href="#">First Level 4</a> </li> </ul>'
             ).insertAfter($(this)).menu().focus().focusout(function() {
                // When out of menu remove this instance
                $(this).empty().remove();
                // Flag false again
                flag = false;
            });
            // Find which menu item is clicked
            $('#mylist a').click(function() {
                var route=$(this).parent().text();
                if($(this).next().length==0){
                    alert('no more levels');
                    alert(route);
                    $('#LabelMenu').text(route);
                }else{
                    alert(route);
                    $('#LabelMenu').text($(this).text());
                }
            });
        }
        // Change flag on click
        flag = true;
    });
});

フィドル: http://jsfiddle.net/BerkerYuceer/gp6H5/

于 2012-11-05T14:16:31.850 に答える
1

クリックの代わりに変更イベントを使用できます

$("select").on('change' , function() {
于 2012-10-16T23:25:25.057 に答える
0

すべてのレベルでメニュー項目に ID を割り当てる方法はありますか。その場合、これらの ID はプログレッシブにすることができます。つまり、メイン メニューの ID は 1、2、3、4、5、6 です。さらに 3,4,5 が拡張された場合、子メニューは (3_1, 3_2, 3_3)、(4_1, 4_2) などのエントリを持つことができます。

このようにして、最終的に要素を選択するときに、ID を使用して、このオプションまでトラバースした場所の完全修飾パスを取得できます。

これは、どうにかしてすべての li 要素に id をプッシュできる場合にのみ機能します。

于 2012-11-02T10:54:39.757 に答える
0 
$('element.selector').on('click', function(event) {    
      event.preventDefault();
      // your logic
});
于 2012-10-31T16:26:14.423 に答える