title: How do I include select2 in quick edit and bulk edit wordpress?
body: <p>I have a custom quick edit field in a custom post type</p>
  <p>I have used the following code for adding the field and its options in the functions.php file.</p>
  <pre><code>echo '&lt;label class=&quot;alignleft&quot;&gt;
    &lt;span class=&quot;title&quot;&gt;Production Member&lt;/span&gt;
    &lt;select name=&quot;production_mem_select&quot; id=&quot;production_mem_select&quot; style=&quot;width:99%;max-width:25em;&quot;&gt;
           &lt;option class=&quot;production-option&quot; value=&quot;0&quot;&gt;None&lt;/option&gt;';
  
          $users = get_users( array( 'fields' =&gt; array( 'ID' ) ) );
          foreach ($users as $user) {
            
            $usermeta = get_user_meta ( $user-&gt;ID);
            
            $username = $usermeta['first_name'][0] . &quot; &quot; . $usermeta['last_name'][0];
            if(isset($username)){
              $username = get_userdata($user-&gt;ID)-&gt;user_login;
            }
              echo &quot;&lt;option class='production-option' value='{$user-&gt;ID}'&gt;{$username}&lt;/option&gt;\n&quot;;
          }
    
    echo '&lt;/select&gt;';
  </code></pre>
  <p><a href="https://i.stack.imgur.com/0iC3V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iC3V.png" alt="enter image description here" /></a></p>
  <p>As soon as I initialize select2 with</p>
  <pre><code>jQuery(function($){
        $( document ).ready(function(){
         $('#production_mem_select').select2();
        });
    });
  </code></pre>
  <p>or</p>
  <pre><code>jQuery(function($){
         $('#production_mem_select').select2();
    });
  </code></pre>
  <p>the dropdown becomes unclickable.</p>
  <p>However, I found a snippet here (<a href="https://wordpress.stackexchange.com/questions/147876/replacing-select2-in-admin-backend-for-all-selects">https://wordpress.stackexchange.com/questions/147876/replacing-select2-in-admin-backend-for-all-selects</a>) which helped me in making the dropdown inside the quick edit select2. I am pasting the code:</p>
  <pre><code>jQuery( document ).ready(
  function( $ ) {
      $( &quot;select:visible&quot; ).select2(); // Only fire on visible inputs to begin with.
      $( document.body ).on( &quot;focus&quot;, &quot;.ptitle,select&quot;,
          function ( ev ) {
              if ( ev.target.nodeName === &quot;SELECT&quot; ) {
                  // Fire for this element only
                  $( this ).select2({ width: &quot;element&quot; });
              } else {
                  // Fire again, but only for selects that haven't yet been select2'd
                  $( &quot;select:visible&quot; ).not( &quot;.select2-offscreen&quot; ).select2({
                      width: &quot;element&quot;
                  });
              }
          }
      );
  }
  </code></pre>
  <p>);</p>
  <p>But the issue here is that the default dropdown toggle is broken because of this code. i.e. when I do a mousedown (keep the left mouse button pressed down) then the dropdown options show and I am able to search but as soon as I let go of the mousedown (release the left mouse button) the dropdown menu disappears.</p>
  <p>My main aim is that I want a dropdown field in the quick edit section where I can search for users and then save the data in a custom field. I have created the custom field and everything is working fine. I just want the option to assign a user in the quick edit section as well.</p>
  <p>Any help would be greatly appreciated.</p>
  <p>Here is a boilerplate to replicate my setup:</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  add_action('quick_edit_custom_box',  'misha_quick_edit_fields', 10, 2);
      
  function misha_quick_edit_fields( $column_name, $post_type ) {
  
        echo '&lt;/div&gt;&lt;/div&gt;&lt;/fieldset&gt;';
        
        echo '&lt;fieldset class=&quot;inline-edit-col-right&quot;&gt;
        &lt;div class=&quot;inline-edit-col&quot;&gt;
        &lt;div class=&quot;inline-edit-group wp-clearfix&quot;&gt;';
        
        echo '&lt;label class=&quot;alignleft&quot;&gt;
        &lt;span class=&quot;title&quot;&gt;QA Member&lt;/span&gt;
        &lt;span class=&quot;input-text-wrap&quot;&gt;&lt;select name=&quot;qa_member&quot; multiple=&quot;multiple&quot; id=&quot;qa_member_quick_edit&quot;&gt;
        &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
        &lt;/select&gt;&lt;/span&gt;
        &lt;/label&gt;';
        ?&gt;
            &lt;script&gt;
            jQuery(function($){
              $( document ).ready(function(){
               $('#production_mem_select').select2();
              });
          });
            &lt;/script&gt;
        &lt;?php
  
  }
  
  
  function enqueue_select2_jquery() {
    if ( 'edit.php' != $pagehook ) {
          return;
      }
   
      wp_enqueue_style('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' );
      wp_enqueue_script('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js');
      // please create also an empty JS file in your theme directory and include it too
  }
  add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' ); 
  </code></pre>