如何使用 jQuery UI MultiSelect 小部件？

在本文中，我们将学习在我们的网页中使用 jQuery UI MultiSelect Widget。在实现以下示例代码之前，请从官网下载所需的预编译文件。注意项目文件夹中的文件路径。

示例 1：以下示例演示了使用 jQuery UI MultiSelect Widget插件的下拉框的基本示例。

HTML

  

    
  
    
  
    
  
    
  
    
    
  
    
    
  
    
    

  

    GeeksForGeeks
  
      

        Check for option values 
        after form submit
    
  
  
    
  
        
  
            Select country:
            America
            China
            Japan
            Australia
        
  
        
            Select city:
            Jaipur
            Delhi
            Mumbai
            Chennai
        
        
        
            
        
    
    
    
  
    
        $("#multipleSelectID").multiselect();
        $("#selectID").multiselect({ multiple: false });
  
        $("form").bind("submit", function () {
            $("#selectResultID").html(
                "<b>Options selected : </b>" 
                + $(this).serialize());
            return false;
        });
    

  

输出：

从下拉列表中选择的选项

当所有选项都被选中然后取消选中时。

示例 2：以下示例演示如何使用回调函数来处理任何类型的事件触发器。请参阅输出以获得更好的理解。

HTML

  

    
  
    
  
    
  
    
  
    
    
      
    
    
      
    
    

  

    GeeksForGeeks
  
      

        Handling callbacks on 
        Events trigger
    
  
    
    
  
    
          
        
              
            Select country:
            America
            China
            Japan
            Australia
        
  
        
            Select city:
            Jaipur
            Delhi
            Mumbai
            Chennai
        
        
    
  
    
        $(function () {
  
            var $callback = $("#callbackResultID");
  
            $("select").multiselect({
                click: function (event, ui) {
                    $callback.text(ui.value + ' ' +
                        (ui.checked ? 'checked' : 'unchecked'));
                },
                beforeopen: function () {
                    $callback.text("Selectobox will open..");
                },
                open: function () {
                    $callback.text("Selectbox opened!");
                },
                beforeclose: function () {
                    $callback.text(
                        "Before Selectbox to be closed...");
                },
                close: function () {
                    $callback.text("Selectbox closed!");
                },
                checkAll: function () {
                    $callback.text("Check all options click event!");
                },
                uncheckAll: function () {
                    $callback.text("Uncheck all option clicked!");
                },
                optgrouptoggle: function (event, ui) {
                    var values = $.map(ui.inputs, function (checkbox) {
                        return checkbox.value;
                    }).join(", ");
  
                    $callback.html("<strong>Checkboxes " +
                        (ui.checked ? "checked" : "unchecked") +
                        ":</strong> " + values);
                },
                groupsCollapsable: true,
                beforecollapsetoggle: function () {
                    $callback.text("Before Option group collapsed");
                },
                collapsetoggle: function () {
                    $callback.text("Option group collapsed");
                }
            });
  
        });
    

  

输出：