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.
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:
[attribute="value"]
).:last-child
selector.document.getElementById()
.document.querySelector()
.HTMLOptionElement
.HTMLSelectElement
.[attribute="value"]
selector.last()
.:last
selector.prop()
.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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With