📌  相关文章
📜  如何使用 jQuery 向选择元素添加选项?

📅  最后修改于: 2021-11-25 04:18:50             🧑  作者: Mango

可以使用 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:              

    

      Click the button below to add        one option to the select box.   

                           

输出:

  • 点击按钮前:
    正常前加
  • 点击按钮后:
    正常添加后

方法二:使用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:              

    

Click the button below to add one option to the select box.

              

输出:

  • 点击按钮前:
    optionObj-before
  • 点击按钮后:
    optionObj-after

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

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

句法:

$('#selectBox').append($('

例子:



    Adding options to a select element using jQuery?


    

GeeksForGeeks

    Adding options to a select element using jQuery?     

        Select one from the given options:              

    

Click the button below to add one option to the select box.

              

输出:

  • 点击按钮前:
    新选项之前
  • 点击按钮后:
    newoption-after

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