溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)怎么使用jQuery向select選項(xiàng)框中添加新選項(xiàng)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
使用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集合的最后一個子集合。這樣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>
從給定選項(xiàng)中選擇一個：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>單擊下面的按鈕，向選擇框添加一個選項(xiàng)。</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>效果圖：
方法2：使用Option()方法創(chuàng)建新選項(xiàng)
Option()方法用于創(chuàng)建新的option元素。該方法將使用文本和選項(xiàng)的值作為參數(shù)創(chuàng)建一個新選項(xià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>
從給定選項(xiàng)中選擇一個：
<select id="select">
<option value="hello">Hello</option>
<option value="hi">Hi</option>
</select>
</p>
<p>單擊下面的按鈕，向選擇框添加一個選項(xiàng)。</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>效果圖：
方法3：使用值和文本創(chuàng)建創(chuàng)建新的option元素
使用option標(biāo)簽創(chuàng)建一個新的jQuery DOM元素。option標(biāo)簽的值是用val()方法設(shè)置的，option標(biāo)簽的文本是用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>
從給定選項(xiàng)中選擇一個：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>單擊下面的按鈕，向選擇框添加一個選項(xiàng)。</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>效果圖：
感謝各位的閱讀！關(guān)于怎么使用jQuery向select選項(xiàng)框中添加新選項(xiàng)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼