Question

我在同一个模式中使用各种jQuery多选小部件。所有这些都有一个文本框来像往常一样过滤所显示的选项，但我无法通过点击它们来关注它们。

在寻找一个解决方案后，我从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
    });

Answer 1

最后我找到了解决方案！我不认为这是最好的，但是直到有人（包括我在内）找到更好的解决方案我发布这个以帮助任何人都感兴趣：

我的解决方案是在makeMultiselect()功能的末尾添加点击和焦点事件：

$(".ui-multiselect-filter input").on( "click",  function() {
   $(this).focus();
});

jQuery multiselect过滤器小部件 - 在多个元素中过滤文本框焦点问题

1 个答案: