6

セマンティック UI ドロップダウンで問題が発生しました。
私は Semantic-Ui を使用しており、ドロップダウン項目を動的に変更したいと考えていました。つまり、最初のドロップダウンから値を選択すると、2 番目のドロップダウンの項目が変更されます。ただし、アイテムが変更されると、2 番目のドロップダウンを選択できず、値が変更されません。ドロップダウンは折りたたまれません。

HTML
最初のドロップダウン

<div id="programmetype" class="ui fluid selection dropdown">
    <input type="hidden" name="programmetype">
    <div class="text">Choose..</div>
    <i class="dropdown icon"></i>
    <div class="menu">
       <div class="item" data-value="val1">Car</div>
       <div class="item" data-value="val2">Tank</div>
       <div class="item" data-value="val3">Plane</div>
    </div>
</div>

2 番目のドロップダウン

<div id="servicetype" class="ui fluid selection dropdown">
    <input type="hidden" name="servicetype">
    <div class="text">Choose..</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="select">Choose..</div>
    </div>
</div>

..........
jQuery

$("#programmetype").dropdown({
            onChange: function (val) {
                if (val == "val1")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Saloon</div>' +
                        '<div class="item" data-value="val2">Truck</div>'
                        );
                };

                if (val == "val2")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Abraham</div>' +
                        '<div class="item" data-value="val2">Leopard</div>' +
                        );
                };

                if (val == "val3")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Jet</div>' +
                        '<div class="item" data-value="val2">Bomber</div>' +
                        );
                };
            }
        });
4

4 に答える 4

0

ホバー効果でドロップダウン メニューを開く場合は、javascript を使用する必要はありません。代わりに、親 div にシンプルなクラスを追加できます。

これはデモ http://jsfiddle.net/BJyQ7/30/です

<div class="ui simple dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>
于 2014-10-07T23:45:25.030 に答える
0

ドロップダウン コンテンツをジャスト イン タイムに設定するための別のアプローチ (たとえば、いくつかの動的基準に基づく) は、remoteApi を使用することです。これは、SemanticUI ドロップダウンのデータ バインディング機能の特に残念な名前です。

こちらの手順に従ってください: http://semantic-ui.com/behaviors/api.html#mocking-responses

于 2015-10-18T11:40:30.320 に答える