StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'd suggest:</p> <pre><code>$('#shipping_customer_address option:last').prop('selected', true); </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#shipping_customer_address option:last').prop('selected', true);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/1/">JS Fiddle demo</a>.</p> <p>Or (a <em>little</em> faster):</p> <pre><code>$('#shipping_customer_address option').last().prop('selected',true); </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#shipping_customer_address option').last().prop('selected',true);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/2/">JS Fiddle demo</a>.</p> <p>You could simply remove the <code>value</code> attribute from the <code>New Address</code> option and select by the absence of that attribute:</p> <pre><code>$('#shipping_customer_address option').not('[value]').prop('selected',true); </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#shipping_customer_address option').not('[value]').prop('selected',true);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/3/">JS Fiddle demo</a>.</p> <p>Or even select by the <em>empty</em> attribute:</p> <pre><code>$('#shipping_customer_address option[value=""]').prop('selected',true); </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#shipping_customer_address option[value=""]').prop('selected',true);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/4/">JS Fiddle demo</a>.</p> <p>Or, in plain JavaScript, to select the last <code><option></code>:</p> <pre><code>document.getElementById('shipping_customer_address').lastElementChild.selected = true; </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('shipping_customer_address').lastElementChild.selected = true;</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/13/">JS Fiddle demo</a>.</p> <p>Or, to select the last <code><option></code> using a CSS selector with <code>document.querySelector()</code>:</p> <pre><code>document.querySelector('#shipping_customer_address option:last-child').selected = true; </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#shipping_customer_address option:last-child').selected = true;</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/16/">JS Fiddle demo</a>.</p> <p>Or, for those browsers that don't recognise <code>lastElementChild</code>:</p> <pre><code>var options = document.getElementById('shipping_customer_address').options; options[options.length - 1].selected = true; </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var options = document.getElementById('shipping_customer_address').options; options[options.length - 1].selected = true;</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/14/">JS Fiddle demo</a>.</p> <p>To select the option that has an empty <code>value</code> property/attribute using <code>document.querySelector()</code>:</p> <pre><code>document.querySelector('#shipping_customer_address option[value=""]').selected = true; </code></pre> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#shipping_customer_address option[value=""]').selected = true;</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <p>External <a href="http://jsfiddle.net/davidThomas/pcaK4/15/">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li>CSS: <ul> <li><a href="http://www.w3.org/TR/selectors/#attribute-selectors">CSS attribute-selectors (<code>[attribute="value"]</code>)</a>.</li> <li><a href="http://www.w3.org/TR/selectors/#last-child-pseudo"><code>:last-child</code> selector</a>.</li> </ul></li> <li>JavaScript: <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a>.</li> <li><a href="https://developer.mozilla.org/en/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</code></a>.</li> <li><a href="https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a>.</li> </ul></li> <li>jQuery: <ul> <li><a href="http://api.jquery.com/attribute-equals-selector/"><code>[attribute="value"]</code> selector</a>.</li> <li><a href="http://api.jquery.com/last/"><code>last()</code></a>.</li> <li><a href="http://api.jquery.com/last-selector/"><code>:last</code> selector</a>.</li> <li><a href="http://api.jquery.com/prop/"><code>prop()</code></a>.</li> </ul></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload