jQuery remove options from select without value attribute

Question

I want to ignore/remove all options from a select box that either have a blank value or don't have the value="" attribute at all, e.g.

<option>Any Option</option>
<option value="">Any Option</option>

Here is my jQuery:

$(function() {

  // Create the dropdown base
  $("<select />").appendTo("#pagination_container");

  // Create default option "Go to..."
  $("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Select Page..."
  }).appendTo("#pagination_container select");

  // Populate dropdown with menu items
  $("#pagination_container a").each(function() {
    var el = $(this);
    $("<option />", {
      "value"   : el.attr("href"),
      "text"    : el.text()
    }).appendTo("#pagination_container select");
  });

  $("#pagination_container select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

});

Answer 1

Target the elements like this

$('option[value=""]');

and to remove do this

$('option[value=""]').remove();

Answer 2

You would need to use a two-part selector to achieve that:

$('option[value=""],option:not([value])').remove();

NOTE: Bear in mind that value="" checks the initial state of the elements. Therefore if you later change the value of the element, and not necessarily the value attribute, then you may get unexpected results. If the values of the option elements are bound to change, please use filter() instead of [value=""].

Answer 3

$("#pagination_container").find("option").each(function(index, el){
  var $el = $(el);
  var value = $el.attr("value");
  if (value === "" || value === undefined)
    $el.remove();
});

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. source

Answer 4

This question is similar to this questions:

• jQuery remove options from select
• Removing an item from a select box

Check the links and learn a lot of diferents way to solve your problem.