How to change value of select box to the last option through jquery

Question

I have one select box in which options and its values will be fetched from PHP database. The last option will be "New Address".

HTML

<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
     <option value="48" selected="selected">p p, yui, cfg,  90602-1234, U.S. Minor Outlying Islands</option>
     <option value="52" selected="selected">e B, ewri, csdfwefg,  90602-1234, U.S. Minor Outlying Islands</option>
     <option value="">New Address</option>
</select>

What I Need

function showForm(){
 jQuery("#shipping_customer_address").val("New Address"); //Not working
}

this show showForm() function should change the value of my select to be "New Address". How to do that.

Answer 1

I'd suggest:

$('#shipping_customer_address option:last').prop('selected', true);

$('#shipping_customer_address option:last').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

Or (a little faster):

$('#shipping_customer_address option').last().prop('selected',true);

$('#shipping_customer_address option').last().prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

You could simply remove the value attribute from the New Address option and select by the absence of that attribute:

$('#shipping_customer_address option').not('[value]').prop('selected',true);

$('#shipping_customer_address option').not('[value]').prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option>New Address</option>
</select>

External JS Fiddle demo.

Or even select by the empty attribute:

$('#shipping_customer_address option[value=""]').prop('selected',true);

$('#shipping_customer_address option[value=""]').prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

Or, in plain JavaScript, to select the last <option>:

document.getElementById('shipping_customer_address').lastElementChild.selected = true;

document.getElementById('shipping_customer_address').lastElementChild.selected = true;

<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

Or, to select the last <option> using a CSS selector with document.querySelector():

document.querySelector('#shipping_customer_address option:last-child').selected = true;

document.querySelector('#shipping_customer_address option:last-child').selected = true;

<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

Or, for those browsers that don't recognise lastElementChild:

var options = document.getElementById('shipping_customer_address').options;

options[options.length - 1].selected = true;

var options = document.getElementById('shipping_customer_address').options;

options[options.length - 1].selected = true;

<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

To select the option that has an empty value property/attribute using document.querySelector():

document.querySelector('#shipping_customer_address option[value=""]').selected = true;

document.querySelector('#shipping_customer_address option[value=""]').selected = true;

<select name="shipping_address_id" id="shipping_customer_address" class="customer_address" title="" onchange="shipping.newAddress(!this.value)">
  <option value="48" selected="selected">p p, yui, cfg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, U.S. Minor Outlying Islands</option>
  <option value="">New Address</option>
</select>

External JS Fiddle demo.

References:

• CSS:
  • CSS attribute-selectors ([attribute="value"]).
  • :last-child selector.
• JavaScript:
  • document.getElementById().
  • document.querySelector().
  • HTMLOptionElement.
  • HTMLSelectElement.
• jQuery:
  • [attribute="value"] selector.
  • last().
  • :last selector.
  • prop().

Answer 2

For this "job" to jQuery you have a lot of ways, i choose the one with .filter()

$('#shipping_customer_address option').filter(function(){return !$(this).val().length }).prop('selected','selected');

edit: now the selected option will be the one with value="" Check the demo

Demo.

Answer 3

You can search your New Address item and select it like this:

jQuery("#shipping_customer_address option:contains('New Address')").prop('selected', true);

See working demo

---

If you just want to select the last option, instead of search for a specific item, you can do like this:

jQuery("#shipping_customer_address option:last").prop('selected', true);

See working demo