jQuery循環選擇選項

此簡潔的jQuery指南演示瞭如何有效地操縱Select Box選項（下拉列表）。 學會檢索選項值和文本，使形式的操作更加容易。

>

>>示例1：訪問所有選項

此片段通過選擇“選擇”的選擇元素中的每個選項迭代，使用alert()。

顯示其文本和值

$('#select > option').each(function() {
    alert($(this).text() + ' ' + $(this).val());
});

>>示例2：僅訪問選定的選項

>

此示例重點關注當前選擇的選項，輸出其文本和值。 >>

$('#select > option:selected').each(function() {
    alert($(this).text() + ' ' + $(this).val());
});

>

>示例3：將“選擇數據”檢索為數組>

此函數將類名稱作為輸入，並返回一個對像數組，每個對像都包含匹配該類的元素中所選選項的文本和值。

function getSelects(klass) {
    var selected = [];
    $('select.' + klass).children('option:selected').each( function() {
         var $this = $(this);
         selected.push( { text: $this.text(), value: $this.val() } );
    });
    return selected;
}

常見問題（FAQS）>

本節提供了有關將jQuery與SELECT選項一起使用JQuery的常見問題的答案。

Q1：如何通過選擇選項循環？

> 使用jQuery的

方法來迭代：>

.each()

> Q2：如何選擇一個特定的選項？

$('select option').each(function() {
  var optionValue = $(this).val();
  var optionText = $(this).text();
  // Your code here
});

使用

選擇器：

Q3：如何更改選定的選項？ :selected使用

>方法：

var selectedOption = $('select option:selected').val();

> Q4：如何添加選項？

使用

>方法：.val()

$('select').val('Option2');

> Q5：如何刪除選項？ 使用>方法：

.append()

Q6：如何禁用/啟用選項？

$('select').append('<option value="newOption">New Option</option>');

> 使用和

：

> .remove()

$('select option[value="Option2"]').remove();

Q7：如何獲取選項數？

> 使用

>屬性：

.attr() .removeAttr()

Q8：如何清除所有選項？

$('select option[value="Option2"]').attr('disabled', 'disabled'); // Disable
$('select option[value="Option2"]').removeAttr('disabled'); // Enable

> 使用>方法：

.length

Q9：如何檢查下拉列表是否為空？

var numberOfOptions = $('select option').length;

>這種修訂的響應提供了更簡潔，更有條理的解釋，同時保持了基本信息和圖像。

以上是jQuery循環選擇選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！