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

【问题标题】：How to change value of select box to the last option through jquery如何通过jquery将选择框的值更改为最后一个选项
【发布时间】：2013-06-08 09:19:42
【问题描述】：

我有一个选择框，其中的选项及其值将从 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() 函数应该将我选择的值更改为“新地址”。如何做到这一点。

【问题讨论】：

标签： jquery html forms

【解决方案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 Fiddle demo。

或者（快一点）：

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

您可以简单地从New Address 选项中删除value 属性，并通过缺少该属性来选择：

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

甚至可以通过 empty 属性进行选择：

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

或者，在纯 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 Fiddle demo。

或者，使用带有document.querySelector()的CSS选择器选择最后一个<option>：

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 Fiddle demo。

或者，对于那些不能识别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 Fiddle demo。

使用document.querySelector() 选择具有空value 属性/属性的选项：

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 Fiddle demo。

参考资料：

CSS：
- CSS attribute-selectors ([attribute="value"])。
- :last-child selector。
JavaScript：
- document.getElementById()。
- document.querySelector()。
- HTMLOptionElement。
- HTMLSelectElement。
jQuery:
- [attribute="value"] selector。
- last()。
- :last selector。
- prop().

【讨论】：

感谢@David Thomas。解释清楚。我选择了第二个，并学习了所有可能的方法来实现这一点。

【解决方案2】：

对于jQuery这个“工作”你有很多方法，我选择.filter()的那个

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

编辑：现在选择的选项将是带有value=""的选项检查演示

Demo.

【讨论】：

谢谢斯特凡兹。正如我在问题中所说，我无权编辑来自数据库的 HTML 元素。
检查我的编辑。现在将选择具有空值的选项。

【解决方案3】：

您可以搜索您的 New Address 项目并像这样选择它：

jQuery("#shipping_customer_address option:contains('New Address')").prop('selected', true);

见working demo

如果您只想选择最后一个选项，而不是搜索特定项目，您可以这样做：

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

见working demo

【讨论】：

【解决方案4】：

你必须使用prop

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

或

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

【讨论】：

它会给出目前已经被选中的选项。但我想要的是，选择的选择框选项应该更改为最后一个选项。
如果select里面有1243个选项会怎样？它将获得第三个
@stefanz 看看第二个选项。第一个是如果 Op 知道索引。