Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

jquery

forms

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.

like image 536
Vel Murugan S Avatar asked Jun 08 '13 09:06

Vel Murugan S


3 Answers

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().
like image 175
David Thomas Avatar answered Dec 20 '22 16:12

David Thomas


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.

like image 34
stefanz Avatar answered Dec 20 '22 16:12

stefanz


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

like image 20
Nelson Avatar answered Dec 20 '22 15:12

Nelson