這篇文章給大家分享的是有關(guān)怎么使用jQuery向select選項(xiàng)框中添加新選項(xiàng)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)邵原免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

使用jQuery向select選項(xiàng)框中添加新選項(xiàng)的方法：1、將options標(biāo)簽添加到select元素中；2、使用【Option()】方法創(chuàng)建新選項(xiàng)；3、使用值和文本創(chuàng)建創(chuàng)建新的option元素。

使用jQuery向select選項(xiàng)框中添加新選項(xiàng)的方法：

方法1：將options標(biāo)簽添加到select元素中

先使用jquery選擇器選擇select元素，然后使用append()方法添加options標(biāo)簽元素。append()方法將指定的內(nèi)容插入jQuery集合的最后一個(gè)子集合。這樣options元素就被添加到select元素中。

語法：

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

示例：

    
        
        
    
     
    
 使用jQuery向select元素中添加options
 
    
 
                    從給定選項(xiàng)中選擇一個(gè)： 
         
            Free 
            Basic 
         
    
 
    
單擊下面的按鈕，向選擇框添加一個(gè)選項(xiàng)。
 
    添加option 
     
     
 

效果圖：

方法2：使用Option()方法創(chuàng)建新選項(xiàng)

Option()方法用于創(chuàng)建新的option元素。該方法將使用文本和選項(xiàng)的值作為參數(shù)創(chuàng)建一個(gè)新選項(xiàng)。然后使用append()方法將此option元素添加到選擇框中。

語法：

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

示例：

    
        
        
    
     
    
 使用jQuery向select元素中添加options
 
    
 
                    從給定選項(xiàng)中選擇一個(gè)： 
         
            Hello 
            Hi 
         
    
 
    
單擊下面的按鈕，向選擇框添加一個(gè)選項(xiàng)。
 
    添加option 
     
     
 

效果圖：

方法3：使用值和文本創(chuàng)建創(chuàng)建新的option元素

使用option標(biāo)簽創(chuàng)建一個(gè)新的jQuery DOM元素。option標(biāo)簽的值是用val()方法設(shè)置的，option標(biāo)簽的文本是用text()方法設(shè)置的。然后使用append()方法將創(chuàng)建的option元素添加到選擇框中。

語法：

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

示例：

    
        
        
    
     
    
 使用jQuery向select元素中添加options
 
    
 
                    從給定選項(xiàng)中選擇一個(gè)： 
         
            Free 
            Basic 
         
    
 
    
單擊下面的按鈕，向選擇框添加一個(gè)選項(xiàng)。
 
    添加option 
     
     
 

效果圖：

感謝各位的閱讀！關(guān)于怎么使用jQuery向select選項(xiàng)框中添加新選項(xiàng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁名稱：怎么使用jQuery向select選項(xiàng)框中添加新選項(xiàng)-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/spjjo.html