All geek questions in one place

How to change the value of a select box to the last option using jquery

I have one selection window in which the parameters and its values ​​will be extracted from the PHP database. The final option would 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US 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 choice as "New Address". How to do it.

+6
source share
4 answers

I would 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

You can simply remove the value attribute from the New Address option and select by the absence of this 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option>New Address</option> </select>

External JS Fiddle demo .

Or even select an 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

Or, in normal 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

Or, to select the last <option> using the 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

Or for those browsers that do not recognize 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

To select a parameter with an empty property / attribute value 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">pp, yui, cfg, 90602-1234, US Minor Outlying Islands</option> <option value="52" selected="selected">e B, ewri, csdfwefg, 90602-1234, US Minor Outlying Islands</option> <option value="">New Address</option> </select>

External JS Fiddle demo .

Literature:

+23
source

For this “job” for jQuery you have many ways, I choose one with .filter()

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

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

Demo version

+2
source

You can search the New Address element 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 searching for a specific item, you can do the following:

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

See working demo

+1
source

You must use prop

  jQuery('#shipping_customer_address option').eq(3).attr('selected', 'selected');

or

 $("#shipping_customer_address option:contains('value')").prop('selected', true);
-1
source

Source: https://habr.com/ru/post/946840/

More articles:


All Articles