如何通过jquery将选择框的值更改为最后一个选项

Question

我有一个选择框,其中的选项及其值将从PHP数据库中获取.最后一个选项是"新地址".

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>

我需要的

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

这个show showForm()函数应该将我的select值改为"New Address".怎么做.

Answer 1

我建议:

$('#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>

外部JS小提琴演示.

或者(快一点):

$('#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>

外部JS小提琴演示.

您可以value从New Address选项中删除该属性,并通过缺少该属性进行选择:

$('#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>

外部JS小提琴演示.

甚至可以选择空属性:

$('#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>

外部JS小提琴演示.

或者,在纯JavaScript中,选择最后一个<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>

外部JS小提琴演示.

或者,<option>使用CSS选择器选择最后一个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>

外部JS小提琴演示.

或者,对于那些无法识别的浏览器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>

外部JS小提琴演示.

要使用以下选项选择具有空value属性/属性的选项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>

外部JS小提琴演示.

参考文献:

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