要在jQuery的<select>
元素中添加選項,您可以使用append()
或val()
方法。以下是兩種方法的示例:
方法1:使用append()
方法向<select>
元素添加選項:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Option</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button id="addButton">Add Option</button>
<script>
$("#addButton").click(function() {
$("#mySelect").append("<option value='newOption'>New Option</option>");
});
</script>
</body>
</html>
方法2:使用val()
方法向<select>
元素添加選項(此方法需要先將<select>
元素的值設置為空):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Option</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button id="addButton">Add Option</button>
<script>
$("#addButton").click(function() {
$("#mySelect").val(''); // 清空現有選項
$("#mySelect").append("<option value='newOption'>New Option</option>");
});
</script>
</body>
</html>
在這兩個示例中,當用戶點擊"Add Option"按鈕時,將向<select>
元素添加一個新的選項。