title: How to select a drop-down menu item with jQuery, in a WordPress image gallery?
body: <p>First, see screenshot to see what I'm trying to select:</p>
  
  <p><img src="https://i.stack.imgur.com/Xyi4N.png" alt="enter image description here"></p>
  
  <p>In WordPress, when I click New Post, then the Add Media button, on the popup image gallery there's the image filtering drop-down menu; I want to automatically select. the "Unattached" item when that popup loads.</p>
  
  <p>I'm having trouble getting this to happen. So far, in my theme's <code>functions.php</code> I have a call to the .js file with the jQuery code in it.</p>
  
  <pre><code>function my_custom_scripts() {
      wp_enqueue_script( 'my-custom', THEMATER_URL . '/js/custom.js', array('jquery'), '1.0.0', true );
  }
  add_action('wp_enqueue_scripts', 'my_custom_scripts');
  </code></pre>
  
  <p>Then in the .js file I have:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      $('#media-attachment-filters').prop('selectedIndex', 6); // select 5th option
  });
  </code></pre>
  
  <p>But nothing happens. What am I missing?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Based on Christian Nguyen's code, I did get it to <em>select</em> the item I wanted, however, it's not actually sorting the image gallery based on that selection, so it's functionally just 'highlighting' the item. My guess is it's not triggering some <code>OnClick</code>/<code>OnSelect</code> event. I tried adding <code>.trigger('change')</code>, but still no joy. Does anyone also know how to get it to actually do so?</p>
  
  <p>So far, I have this code, note that ALL of the commented out items WILL select the item, just no actual "selection" triggered to do the sorting.</p>
  
  <pre><code>/* When Insert Media button gets clicked ... */
  $("#insert-media-button").on('click', function() {
  
       // Set a 'delay' of 0, &amp; then call the function that selects the menu item.
       // NOTE: Skipping the setTimeout, &amp; just directly call the selector doesn't work.
      setTimeout(function() {
  
          /* BUG: All 4 of the following WILL select the "Unattached" drop-down item,
                          However, ALL pics still get loaded, instead of JUST the UNATTACHED
                          pics, which is what we want.
          */
          //$('#media-attachment-filters').attr('selected', 'selected').trigger('change');
          //$('#media-attachment-filters').val('unattached');
          //$('#media-attachment-filters').prop('selectedIndex', 5);
          //$('#media-attachment-filters&gt;option:eq(5)').prop('selected', true);
      }, 0);
  });
  </code></pre>
  
  <p>Another thing of NOTE: in my case, the .js also wasn't being called at all in the admin area because I mistakenly only <em>enqueued</em> it for the front-end, I had to use <code>admin_enqueue_scripts</code> to get the .js to load in the admin area (back end) where the action is actually happening.</p>