docs/index.html


<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
        <link rel="next" href="download.html">
      
      
      <link rel="icon" href="favicon.ico">
      <meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.31">
    
    
        <title>Overview - Bugfish jQuery Sortselect</title>
      
    
      <link rel="stylesheet" href="assets/stylesheets/main.3cba04c6.min.css">
      
        
        <link rel="stylesheet" href="assets/stylesheets/palette.06af60db.min.css">
      
      
   <!-- META INJECTION START -->
  <!-- META INJECTION START -->
  <!-- META INJECTION START -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="subject" content="documentation">
	<meta name="copyright" content="bugfish">
	<meta name="language" content="en">
	<meta name="robots" content="index,follow">
	<meta name="author" content="bugfish, ynvnzmlzaa@gmail.com">
	<meta property="og:image" content="./meta.png">    
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "Bugfish jQuery Sortselect",
    }
    </script>
	<script type="application/ld+json">
	{
	  "@context": "http://schema.org",
	  "@type": "TechArticle",
	  "headline": "Overview",
	  "description": "Discover the 'multiselect-sortable' jQuery plugin that simplifies the selection and organization of multiple options in a user-friendly dual list box. Easily manage your selections and enhance user experience with this intuitive tool.",
	  "articleSection": "Overview",
	  "datePublished": "2025-03-04",
	  "dateModified": "2025-03-04",
	  "author": {
		"@type": "Person",
		"name": "Jan-Maurice Dahlmanns"
	  },
	  "publisher": {
		"@type": "Organization",
		"name": "Bugfish",
		"logo": {
		  "@type": "ImageObject",
		  "url": "./logo.png"
		}
	  }
	}
	</script> 
	<meta property="og:title" content="Overview - Bugfish jQuery Sortselect">
	<meta name="description" content="Discover the 'multiselect-sortable' jQuery plugin that simplifies the selection and organization of multiple options in a user-friendly dual list box. Easily manage your selections and enhance user experience with this intuitive tool.">  
	<meta name="og:description" content="Discover the 'multiselect-sortable' jQuery plugin that simplifies the selection and organization of multiple options in a user-friendly dual list box. Easily manage your selections and enhance user experience with this intuitive tool.">  
  <!-- META INJECTION END -->  
  <!-- META INJECTION END -->  
  <!-- META INJECTION END --> 
    
    
      <link rel="stylesheet" href="assets/_mkdocstrings.css">
    
      <link rel="stylesheet" href="jquery.multiselect.sortable.js.css">
    
      <link rel="stylesheet" href="extra.css">
    
    <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
   <link href="assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
    html.glightbox-open { overflow: initial; height: 100%; }
    .gslide-title { margin-top: 0px; user-select: text; }
    .gslide-desc { color: #666; user-select: text; }
    .gslide-image img { background: white; }
    .gscrollbar-fixer { padding-right: 15px; }
    .gdesc-inner { font-size: 0.75rem; }
    body[data-md-color-scheme="default"] .gdesc-inner { background: var(--md-default-bg-color);}
    body[data-md-color-scheme="default"] .gslide-title { color: var(--md-default-fg-color);}
    body[data-md-color-scheme="default"] .gslide-desc { color: var(--md-default-fg-color);}</style> <script src="assets/javascripts/glightbox.min.js"></script></head>
  
  
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="blue">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#bugfish-jquery-sortselect" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="index.html" title="Bugfish jQuery Sortselect" class="md-header__button md-logo" aria-label="Bugfish jQuery Sortselect" data-md-component="logo">
      
  <img src="logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            Bugfish jQuery Sortselect
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Overview
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="blue"  aria-hidden="true"  type="radio" name="__palette" id="__palette_0">
    
  
</form>
      
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/bugfishtm/bugfish-jquery-sortselect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    bugfish-jquery-sortselect
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="index.html" title="Bugfish jQuery Sortselect" class="md-nav__button md-logo" aria-label="Bugfish jQuery Sortselect" data-md-component="logo">
      
  <img src="logo.png" alt="logo">

    </a>
    Bugfish jQuery Sortselect
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/bugfishtm/bugfish-jquery-sortselect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    bugfish-jquery-sortselect
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    Overview
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="index.html" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    Overview
  </span>
  

      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    <span class="md-ellipsis">
      Introduction
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Introduction">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#additional-libraries" class="md-nav__link">
    <span class="md-ellipsis">
      Additional Libraries
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#implementation-steps" class="md-nav__link">
    <span class="md-ellipsis">
      Implementation Steps
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#demo" class="md-nav__link">
    <span class="md-ellipsis">
      Demo
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#downloads" class="md-nav__link">
    <span class="md-ellipsis">
      Downloads
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#contributing" class="md-nav__link">
    <span class="md-ellipsis">
      Contributing
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#warranty" class="md-nav__link">
    <span class="md-ellipsis">
      Warranty
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#support" class="md-nav__link">
    <span class="md-ellipsis">
      Support
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#license" class="md-nav__link">
    <span class="md-ellipsis">
      License
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="download.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Download
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="contributing.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Contributing
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="warranty.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Warranty
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="support.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Support
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="license.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    License
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="https://bugfishtm.blogspot.com/2023/05/impressum.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Impressum
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="https://bugfishtm.blogspot.com/2023/05/privacy.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Privacy
  </span>
  

      </a>
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    <span class="md-ellipsis">
      Introduction
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Introduction">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#additional-libraries" class="md-nav__link">
    <span class="md-ellipsis">
      Additional Libraries
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#implementation-steps" class="md-nav__link">
    <span class="md-ellipsis">
      Implementation Steps
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#demo" class="md-nav__link">
    <span class="md-ellipsis">
      Demo
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#downloads" class="md-nav__link">
    <span class="md-ellipsis">
      Downloads
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#contributing" class="md-nav__link">
    <span class="md-ellipsis">
      Contributing
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#warranty" class="md-nav__link">
    <span class="md-ellipsis">
      Warranty
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#support" class="md-nav__link">
    <span class="md-ellipsis">
      Support
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#license" class="md-nav__link">
    <span class="md-ellipsis">
      License
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  
<div><h1 id="bugfish-jquery-sortselect">Bugfish jQuery Sortselect</h1>
<p>Enhance multi-select elements with sortable, dual-list functionality and unique instance handling.</p>
<hr>
<h2 id="introduction">Introduction</h2>
<p>The <strong>"multiselect-sortable"</strong> jQuery plugin enhances multiple select elements by allowing easy sorting and management of selected options within a dual list box. This updated version includes a <strong>"rid" (Resource Identifier)</strong> parameter to distinguish between different instances of the script on the same webpage. Failing to provide a unique "rid" value for each instance can cause errors or unexpected behavior.</p>
<h3 id="additional-libraries">Additional Libraries</h3>
<p>This repository includes both jQuery and jQuery-UI to demonstrate the plugin's functionality. These libraries are provided to streamline the integration process, ensuring developers have the necessary resources readily available. By including these files, we aim to make it easier for developers to get up and running with the plugin quickly.</p>
<div class="language-html highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"./jquery-ui.min.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"./jquery.multiselect.sortable.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"./jquery.multiselect.sortable.js.css"</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="implementation-steps">Implementation Steps</h3>
<ol>
<li><strong>Load the necessary jQuery libraries:</strong></li>
</ol>
<div class="language-html highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/path/to/cdn/jquery.min.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/path/to/cdn/jquery-ui.min.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></code></pre></div>
<ol>
<li><strong>Load the multiselect-sortable plugin's JavaScript and CSS files:</strong></li>
</ol>
<div class="language-html highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"assets/js/jquery.multiselect.sortable.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"assets/css/jquery.multiselect.sortable.js.css"</span><span class="p">&gt;</span>
</span></code></pre></div>
<ol>
<li><strong>Add the <code>multiselectsortable</code> class to your multiple select element and define pre-selected options using the <code>selected</code> attribute. Ensure you provide a unique <code>rid</code> value for each instance:</strong></li>
</ol>
<div class="language-html highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="cm">&lt;!-- Example 1 --&gt;</span>
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">"multiselectsortable"</span> <span class="na">class</span><span class="o">=</span><span class="s">"multiselectsortable demo multiselectsortable-1"</span> <span class="na">multiple</span> <span class="na">data-rid</span><span class="o">=</span><span class="s">"instance-1"</span><span class="p">&gt;</span>
</span><span id="__span-3-3"><a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a>  <span class="cm">&lt;!-- Options here... --&gt;</span>
</span><span id="__span-3-4"><a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
</span><span id="__span-3-5"><a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a>
</span><span id="__span-3-6"><a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="cm">&lt;!-- Example 2 --&gt;</span>
</span><span id="__span-3-7"><a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">"multiselectsortable"</span> <span class="na">class</span><span class="o">=</span><span class="s">"multiselectsortable demo multiselectsortable-2"</span> <span class="na">multiple</span> <span class="na">data-rid</span><span class="o">=</span><span class="s">"instance-2"</span><span class="p">&gt;</span>
</span><span id="__span-3-8"><a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a>  <span class="cm">&lt;!-- Options here... --&gt;</span>
</span><span id="__span-3-9"><a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
</span><span id="__span-3-10"><a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a>
</span><span id="__span-3-11"><a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a><span class="cm">&lt;!-- Example 3 --&gt;</span>
</span><span id="__span-3-12"><a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a><span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">"multiselectsortable"</span> <span class="na">class</span><span class="o">=</span><span class="s">"multiselectsortable demo multiselectsortable-3"</span> <span class="na">multiple</span> <span class="na">data-rid</span><span class="o">=</span><span class="s">"instance-3"</span><span class="p">&gt;</span>
</span><span id="__span-3-13"><a id="__codelineno-3-13" name="__codelineno-3-13" href="#__codelineno-3-13"></a>  <span class="cm">&lt;!-- Options here... --&gt;</span>
</span><span id="__span-3-14"><a id="__codelineno-3-14" name="__codelineno-3-14" href="#__codelineno-3-14"></a><span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
</span></code></pre></div>
<ol>
<li><strong>Call the function on the select element to activate the plugin, ensuring you pass the <code>rid</code> parameter for each instance:</strong></li>
</ol>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="nx">jQuery</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="w">  </span><span class="c1">// Example 1</span>
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="w">  </span><span class="nx">$</span><span class="p">(</span><span class="s1">'.multiselectsortable-1'</span><span class="p">).</span><span class="nx">bugfish_sortselect</span><span class="p">({</span>
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="w">    </span><span class="nx">rid</span><span class="o">:</span><span class="w"> </span><span class="s1">'instance-1'</span>
</span><span id="__span-4-5"><a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="w">  </span><span class="p">});</span>
</span><span id="__span-4-6"><a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a><span class="p">});</span>
</span><span id="__span-4-7"><a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a>
</span><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a><span class="nx">jQuery</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
</span><span id="__span-4-9"><a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="w">  </span><span class="c1">// Example 2</span>
</span><span id="__span-4-10"><a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a><span class="w">  </span><span class="nx">$</span><span class="p">(</span><span class="s1">'.multiselectsortable-2'</span><span class="p">).</span><span class="nx">bugfish_sortselect</span><span class="p">({</span>
</span><span id="__span-4-11"><a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a><span class="w">    </span><span class="nx">rid</span><span class="o">:</span><span class="w"> </span><span class="s1">'instance-2'</span>
</span><span id="__span-4-12"><a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a><span class="w">  </span><span class="p">});</span>
</span><span id="__span-4-13"><a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a><span class="p">});</span>
</span><span id="__span-4-14"><a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a>
</span><span id="__span-4-15"><a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a><span class="nx">jQuery</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
</span><span id="__span-4-16"><a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a><span class="w">  </span><span class="c1">// Example 3</span>
</span><span id="__span-4-17"><a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a><span class="w">  </span><span class="nx">$</span><span class="p">(</span><span class="s1">'.multiselectsortable-3'</span><span class="p">).</span><span class="nx">bugfish_sortselect</span><span class="p">({</span>
</span><span id="__span-4-18"><a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a><span class="w">    </span><span class="nx">rid</span><span class="o">:</span><span class="w"> </span><span class="s1">'instance-3'</span>
</span><span id="__span-4-19"><a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a><span class="w">  </span><span class="p">});</span>
</span><span id="__span-4-20"><a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a><span class="p">});</span>
</span></code></pre></div>
<h3 id="demo">Demo</h3>
<p>Here you can see a demonstration of the bugfish sortselect jquery plugin! Check the Browsers Console after Submitting to see submitted values! </p>
<form action="" method="post">
<select name="multiselectsortable_1" class="multiselectsortable_1 bugfish_1" multiple>
<option value="7" selected data-deneme="deneme" disabled>Entry 7</option>
<option value="6" selected disabled>Entry 6</option>
<option value="5" disabled>Entry 5</option>
<option value="4" selected>Entry 4</option>
<option value="3" selected>Entry 3</option>
<option value="2" selected>Entry 2</option>
<option value="1" selected>Entry 1</option>
</select>
<input type="submit" class="submit_btn md-button" value="Submit Form"></form>

<p>Check the browser console after submit!</p>
<hr>
<h2 id="downloads">Downloads</h2>
<p>The <a href="./download.html">Downloads Section</a> provides all the necessary files to get started with the project, including the latest software versions and any related resources.</p>
<hr>
<h2 id="contributing">Contributing</h2>
<p>Find out how you can contribute to the project by visiting the <a href="./contributing.html">Contributing Page</a>. Whether you want to report bugs, suggest features, or submit improvements, we welcome your involvement.</p>
<hr>
<h2 id="warranty">Warranty</h2>
<p>Review the terms of our warranty on the <a href="./warranty.html">Warranty Information Page</a>. This page outlines the scope of support and any applicable guarantees.</p>
<hr>
<h2 id="support">Support</h2>
<p>If you need assistance, visit the <a href="./support.html">Support Page</a> to find the available channels for getting help with any issues or questions you might have.</p>
<hr>
<h2 id="license">License</h2>
<p>Get the full details on licensing by checking out the <a href="./license.html">License Information Page</a>. This section includes the terms and conditions under which the project is distributed.</p></div>


              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": ".", "features": ["content.code.copy"], "search": "assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="assets/javascripts/bundle.fe8b6f2b.min.js"></script>
      
        <script src="jq.3.6.min.js"></script>
      
        <script src="jquery-ui.min.js"></script>
      
        <script src="jquery.multiselect.sortable.js"></script>
      
        <script src="extra.js"></script>
      
    
  <script id="init-glightbox">const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "slide"});
document$.subscribe(() => { lightbox.reload() });
</script></body>
</html>