7

オプションとその値が PHP データベースから取得される選択ボックスが 1 つあります。最後のオプションは「新しい住所」です。

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 に答える