怎么使用jQuery向select選項框中添加新選項-創(chuàng)新互聯(lián)

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

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

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

使用jQuery向select選項框中添加新選項的方法：

方法1：將options標簽添加到select元素中

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

語法：

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h3 style="color: green"> 使用jQuery向select元素中添加options</h3> 
    <p> 
                    從給定選項中選擇一個： 
        <select id="select"> 
            <option value="free">Free</option> 
            <option value="basic">Basic</option> 
        </select> 
    </p> 
    <p>單擊下面的按鈕，向選擇框添加一個選項。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = 'Premium'; 
            optionValue = 'premium'; 
            $('#select').append(`<option value="${optionValue}"> ${optionText} </option>`); 
        } 
    </script> 
</body> 
</html>

效果圖：

怎么使用jQuery向select選項框中添加新選項

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

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

語法：

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h3 style="color: red"> 使用jQuery向select元素中添加options</h3> 
    <p> 
                    從給定選項中選擇一個： 
        <select id="select"> 
            <option value="hello">Hello</option> 
            <option value="hi">Hi</option> 
        </select> 
    </p> 
    <p>單擊下面的按鈕，向選擇框添加一個選項。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = 'welcome'; 
            optionValue = 'welcome'; 
            $('#select').append(new Option(optionText, optionValue)); 
        } 
    </script> 
</body> 
</html>

效果圖：

怎么使用jQuery向select選項框中添加新選項

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

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

語法：

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h3 style="color: green"> 使用jQuery向select元素中添加options</h3> 
    <p> 
                    從給定選項中選擇一個： 
        <select id="select"> 
            <option value="free">Free</option> 
            <option value="basic">Basic</option> 
        </select> 
    </p> 
    <p>單擊下面的按鈕，向選擇框添加一個選項。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = 'Extra'; 
            optionValue = 'extra'; 
            $('#select').append($('<option>').val(optionValue).text(optionText)); 
        } 
    </script> 
</body> 
</html>

效果圖：

怎么使用jQuery向select選項框中添加新選項

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

本文標題：怎么使用jQuery向select選項框中添加新選項-創(chuàng)新互聯(lián)
標題來源：http://muchs.cn/article20/spjjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、搜索引擎優(yōu)化、小程序開發(fā)、商城網(wǎng)站、網(wǎng)站收錄、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容