如何使用 jQuery 向选择元素添加选项？

可以使用 jQuery 中的 3 种方法将选项添加到选择元素：

方法一：将选项标签附加到选择框

要添加的选项像普通的 HTML字符串一样创建。选择框是用 jQuery 选择器选择的，这个选项是用append() 方法添加的。 append() 方法将指定的内容作为 jQuery 集合的最后一个子元素插入。因此该选项被添加到 select 元素中。

句法：

$('#selectBox').append(`${optionText}`)

例子：

    
      Adding options to a select element using jQuery?
  

  

    
      GeeksForGeeks
  
    
      Adding options to a select element using jQuery?
  
    
        Select one from the given options:
        
            Free
            Basic
        
    
    
      Click the button below to add 
      one option to the select box.
  
    
    
      Add option
  
    
    
  
    
        function addOption() {
            optionText = 'Premium';
            optionValue = 'premium';
  
            $('#select1').append(`<option value="${optionValue}">
                                       ${optionText}
                                  </option>`);
        }
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

方法二：使用Option()构造函数创建新选项

Option() 构造函数用于创建新的选项元素。使用文本和选项值作为参数创建一个新选项。然后使用 append() 方法将此元素添加到选择框中。

句法：

$('#selectBox').append(new Option(optionText, optionValue))

例子：

    Adding options to a select element using jQuery?


    GeeksForGeeks
    Adding options to a select element using jQuery?
    
        Select one from the given options:
        
            Free
            Basic
        
    
    Click the button below to add one option to the select box.
    Add option
    
    
        function addOption() {
            optionText = 'Ultimate';
            optionValue = 'ultimate';
  
            $('#select1').append(new Option(optionText, optionValue));
        }
    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

方法 3：使用值和文本创建一个新的选项元素

使用 option 标签创建了一个新的 jQuery DOM 元素。标签的值使用 val() 方法设置，选项的文本使用 text() 方法设置。然后使用 append() 方法将创建的元素添加到选择框中。

句法：

$('#selectBox').append($('').val(optionValue).text(optionText))

例子：

    Adding options to a select element using jQuery?


    GeeksForGeeks
    Adding options to a select element using jQuery?
    
        Select one from the given options:
        
            Free
            Basic
        
    
    Click the button below to add one option to the select box.
    Add option
    
    
        function addOption() {
            optionText = 'Extra';
            optionValue = 'extra';
  
            $('#select1').append($('<option>').val(optionValue).text(optionText));
        }
    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。