0

jqueryMobille バージョン 1.4.2 を使用しています。曜日を選択するドロップダウンがあります。

    <select class="userInput" name="selectDays" id="selectDays" multiple="multiple" data-native-       menu="false">
<option  data-placeholder="Days of the week"></option>
<option value="" >Select All</option>
<option value="Mon" >Monday</option>
<option value="Tue" >Tuesday</option>
<option value="Wed" >Wednesday</option>
<option value="Thu" >Thursday</option>
<option value="Fri" >Friday</option>
<option value="Sat" >Saturday</option>
<option value="Sun" >Sunday</option>
</select>

選択したすべてのオプションを選択するすべての選択オプションを追加したいと思います。また、他のオプションが選択解除されたときにトグル動作を表示する必要があります。ただし、select Allボックスにイベントを追加すると、jqueryがすべてのオプションでダミーの選択を作成し、イベントが転送されないため、それは呼び出されません。基本的に、ブートストラップの複数選択のように機能するはずです。 http://davidstutz.github.io/bootstrap-multiselect/ それを自分のアプリケーションにも統合しようとしましたが、うまくいきません。他の代替案を提案してください。

4

1 に答える 1

3

これは jQM ウィジェットでは提供されていませんが、スクリプトを少し追加することで、この機能を実現できます。

select マークアップが与えられた場合:

<select class="userInput" name="selectDays" id="selectDays" multiple="multiple" data-native-menu="false" >
    <option val="placeholder"  data-placeholder="true">Days of the week</option>
    <option value="" >Select All</option>
    <option value="Mon" >Monday</option>
    <option value="Tue" >Tuesday</option>
    <option value="Wed" >Wednesday</option>
    <option value="Thu" >Thursday</option>
    <option value="Fri" >Friday</option>
    <option value="Sat" >Saturday</option>
    <option value="Sun" >Sunday</option>
</select>

jQM がポップアップするメニュー リストには、select id + "-menu" の id が割り当てられます。したがって、メニュー ボタンのクリック イベントを処理し、すべて選択がクリックされたかどうかを確認できます。

var IsSelectAllOperation = false;
$(document).on("click", "#selectDays-menu li a", function(){
    //was select all clicked (data-option-index="1")
    var idx = $(this).closest("li").data("option-index");
    if (idx == '1') {
        var IsChecked = $(this).hasClass("ui-checkbox-on");
        if (IsChecked){
            //select all
            IsSelectAllOperation = true;
            $("#selectDays-menu li a").each(function( index ) {
                var IsHidden = $(this).closest("li").hasClass("ui-screen-hidden");
                var NotChecked = $( this ).hasClass("ui-checkbox-off");
                if (!IsHidden && NotChecked){
                    $(this).click();
                }
            });
            IsSelectAllOperation = false;
        }
    } else {
        //uncheck the select all option
        if (!IsSelectAllOperation) {
            var $selall = $('#selectDays-menu li[data-option-index="1"] a');
            if ($selall.hasClass("ui-checkbox-on")){
                $selall.click();
            }
        }
    }
});

イベント委任を使用して、「selectDays-menu」という選択メニュー内の任意のアンカーのクリックを処理します。次に、アンカーを含む LI の option-index というデータ属性を確認します。オプション 0 は非表示のプレースホルダー、1 はすべて選択オプション、残りは 2、3、4 などです。

したがって、1 をクリックすると、チェックされているかチェックされていないかがわかります。チェックされている場合は、残りのオプションを繰り返し、まだチェックされていない場合は、クリック イベントを発生させます。

他のオプションがクリックされた場合は、すべて選択オプションのチェックを外します。

ここに動作するデモがあります

于 2014-09-24T13:50:56.483 に答える