7

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

4

4 回答 4

26

我建议：

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

或者（快一点）：

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

您可以简单地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 Fiddle 演示。

甚至可以通过空属性选择：

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

或者，在纯 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 演示。

或者，<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 Fiddle 演示。

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

要选择具有空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 Fiddle 演示。

参考：

于 2013-06-08T09:28:48.847 回答
2

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

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

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

演示。

于 2013-06-08T10:00:54.050 回答
1

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

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

查看工作演示

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

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

查看工作演示

于 2013-06-08T09:23:53.963 回答
-1

你必须使用prop

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

或者

$("#shipping_customer_address option:contains('value')").prop('selected', true);
于 2013-06-08T09:21:29.243 回答