0

同じモーダルでさまざまな jQuery multiselect ウィジェットを使用しています。いつものように、それらにはすべて、表示されるオプションをフィルタリングするためのテキストボックスがありますが、それらをクリックして集中することはできませんでした.

解決策を探した後、私は問題の部分的な解決策を見つけたuser2457092からこの質問を見つけました:

$("#MyStatusWidget").multiselect({
  open: function () {
    $("input[type='search']:first").focus();                   
  }
});

このコードは私の問題を解決しましたが、モーダルにある最初の複数選択についてのみです。$("input[type='search']:first").focus();そのため、すべてのウィジェットで線を機能させる方法がわかりません。

これが私のコードです：

<div class="form-group">
    <div class="col-sm-4">
        <?php   
            echo $form->dropDownList($model,'Id', CHtml::listData($model1,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,                  
            ));  
        ?>
    </div>
    <div class="col-sm-4" >
        <?php   
            echo $form->dropDownList($model,'Id', CHtml::listData($model2,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,
            ));  
        ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-4">
        <?php 
            echo $form->dropDownList($model,'Id', CHtml::listData($model3,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,
            ));
        ?>
        </div>
    </div>
    <div class="col-sm-4">
        <?php         
            echo $form->dropDownList($model,'Id', CHtml::listData($model3,'Id','Nombre'),array(
                'multiple'  => 'multiple',
                'class'     => 'col-sm-2 multiple_select multiple_select_filter',
                'options'   => null,
            ));  
        ?>
    </div>
</div>

JavaScript:

function makeMultiselect(){
     $("#modal .multiple_select_filter_single").multiselect({
        multiple:       false,
        selectedList:   1,
        open: function () {
            $("input[type='search']:first").focus();
        },
        beforeopen: function(){ $(this).multiselect("widget").width("450px"); },    
        click: function(e){
            if( $(this).multiselect("widget").find("input:checked").length > 1 ){
                return false;
            }
        }
    }).multiselectfilter({
        label:        "Filtro:",
        placeholder:  "",
        autoReset:    false
    });

     $("#modal .multiple_select_filter").multiselect({
        multiple:       true,
        selectedList:   1,
        beforeopen: function(){ $(this).multiselect("widget").width("450px"); },
        open: function () {
            $("input[type='search']:first").focus();
        }
    }).multiselectfilter({
          label:        "Filtro:",
          placeholder:  "",
          autoReset:    false
    });
4

1 に答える 1

0

最後に解決策を見つけました！私はそれが最良のものだとは思いませんが、誰か（私を含む）がより良い解決策を見つけるまで、誰もが興味を持つのを助けるためにこれを投稿します：

私の解決策は、関数の最後にclick&focusイベントを追加することです。makeMultiselect()

$(".ui-multiselect-filter input").on( "click",  function() {
   $(this).focus();
});
于 2015-03-12T16:06:35.170 に答える